Ƭiαgѳ ઽαทƬѳઽ 188 Posted April 17, 2013 Boa noite, bom visto nã haver a área de programação Javascript o mais indicado será colocar nesta zona de HTML. Venho apresentar um plugin elaborado por mim de um slider cujo o nome lhe dei foi "jqSlider", jq de JQuery, e slider de slide. Este plugin vai ser acompanhado de um website oficial do plugin que está neste momento a ser desenvolvido, no entanto vou escrever parte da informação que o website irá conter.NOTA: Aconselho a lerem a documentação aqui apresentada, não só para esclarecer duvidas que possam surgir mas sim também para ficarem dentro do que se trata e ainda perceberem como implementar o jqSlider.Introdução: jqSlider é um plugin que permite a visualização de imagens em simultâneo. Este sistema é totalmente grátis. Para o poder obter basta fazer o download a partir do website. Este sistema tem como principal objetivo não só a sua utilização profissional, mas, também a sua utilização para aprendizagem. jqSlider conta com 16 personalizações difrentes, divididas em duas partes, ou seja, 6 tipos de personalizações simples e 10 personalizações conjuntas. jqSlider foi desenvolvido por Tiago Santos e participação de Cristina Mendes, da companhia Brodcast Studio.Desenvolvimento do Sistema: jqSlider é um sistema para implementação Web, feito nas linguagens de programação HTML, CSS e Javascript / JQuery. jqSlider utiliza como base a biblioteca API JQuery, usando funções simplificadas de Javascript. Este sistema funciona por "tempos de ação", usando esses "tempos" para efetuar efeitos e contagens.Código HTML correspondente ao jqSlider:<!-- <[jqSlider: Elementos HTML]> --><div class="jqSliderBox"> <div class="jqSliderLoadElements"></div> <div class="jqSliderReady"> <div class="jqSliderImgHref"> </div> <div class="jqSliderBoxMaxImages"> </div> <div class="jqSliderBoxImgsArrowLeft" onClick="jqSliderBack()"> </div> <div class="jqSliderBoxImgsArrowRight" onClick="jqSliderNext()"> </div> <div class="jqSliderBoxImgs"> <!-- <[jqSlider: Adicionar a baixo o código das imagens]> --> <img src="./jqSliderImages/1.jpg" id="1" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="Link" /> </div> <div class="jqSliderBoxInfos"> <div class="jqSliderBoxInfosTitle"> </div> <div class="jqSliderBoxInfosConcent"> </div> </div> <div class="jqSliderBoxTimeOfNextImage"> <div> </div> </div> </div></div><!-- <[jqSlider: Elementos HTML][END]> -->Todo o código que está representado acima é obrigatório para que o jqSlider possa funcionar corretamente. O código será retirado automaticamente caso a função dele não esteja ativa nas personalizações de cada utilizador.Código HTML correspondente as Imagens: Podem ser adicionadas todas as imagens que cada utilizador pretender. As imagens devem ser adicionadas como mostra o exemplo abaixo. Cada uma deve conter os Atributos que estão no exemplo. Os Atributos são obrigatórias para que o jqSlider possa funcionar corretamente.<img src="./jqSliderImages/1.jpg" id="1" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="Link" /><img src="./jqSliderImages/2.jpg" id="2" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="Link" /><img src="./jqSliderImages/3.jpg" id="3" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="Link" /> Descrição dos Atributos das Imagens:id --> Em todas as imagens o "ID" deve ser um número único.jqSliderTitle --> Esta tag permite dar um título à imagem quando visível no jqSlider. Esta tag é obrigatória quando a função da descrição está ativada.jqSliderConcent --> Esta tag permite dar um contexto ou uma descrição à imagem quando visível. Esta obedece ao parâmetro da tag "jqSliderTitle".jqSliderImageLink --> Esta tag permite dar um link exterior ou interior. Caso deseja colocar link's em apenas algumas imagens, esta tag deve permanecer vazia.Implementação do estilo, da API JQuery, e do plugin jqSlider:<head> <!-- Chamada da folha de estilo do jqSlider --> <link type="text/css" rel="stylesheet" media="all" href="./jqSliderStyle/jqSliderStyle.css" /> <!-- Chamada do jqSlider e da biblioteca JQuery --> <script type="text/javascript" src="./jqSliderJavaScript/jquery.min.js"> </script> <script type="text/javascript" src="./jqSliderJavaScript/jqSlider.js"> </script> <!-- Chamada da função principal do jqSlider --> <script type="text/javascript"> $(document).ready(function() { jqSlider(); // Chamada da função "jqSlider()" }); </script></head> Código Final:<!DOCTYPE html><html> <head> <!-- Chamada da folha de estilo do jqSlider --> <link type="text/css" rel="stylesheet" media="all" href="./jqSliderStyle/jqSliderStyle.css" /> <!-- Chamada do jqSlider e da biblioteca JQuery --> <script type="text/javascript" src="./jqSliderJavaScript/jquery.min.js"> </script> <script type="text/javascript" src="./jqSliderJavaScript/jqSlider.js"> </script> <!-- Chamada da função principal do jqSlider --> <script type="text/javascript"> $(document).ready(function() { jqSlider(); // Chamada da função "jqSlider()" }); </script> </head> <!-- <[jqSlider: Elementos HTML]> --> <div class="jqSliderBox"> <div class="jqSliderLoadElements"></div> <div class="jqSliderReady"> <div class="jqSliderImgHref"> </div> <div class="jqSliderBoxMaxImages"> </div> <div class="jqSliderBoxImgsArrowLeft" onClick="jqSliderBack()"> </div> <div class="jqSliderBoxImgsArrowRight" onClick="jqSliderNext()"> </div> <div class="jqSliderBoxImgs"> <!-- <[jqSlider: Adicionar a baixo o código das imagens]> --> <img src="./jqSliderImages/1.jpg" id="1" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="Link" /> </div> <div class="jqSliderBoxInfos"> <div class="jqSliderBoxInfosTitle"> </div> <div class="jqSliderBoxInfosConcent"> </div> </div> <div class="jqSliderBoxTimeOfNextImage"> <div> </div> </div> </div> </div> <!-- <[jqSlider: Elementos HTML][END]> --> </body></html> Personalização: jqSlider tem vários tipos de personalização. O utilizador apenas precisa de definir com "verdadeiro" ou "falso" as personalizações que deseja. Algumas personalizações fazem combinação com outras. Para ativar e desativar elementos de personalização, basta abrir o ficheiro "jqSlider.js", e seguir os exemplos abaixo representados.Personalizações Simples: Estilo simples, sem personalização: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo simples, com o número máximo de imagens e imagem actual visivel: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo simples, ligação para cada imagem em "Bolas": // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = true // Activar para "true";jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo simples de Descrição, apresenta um título e uma descrição relativa á imagem: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo simples de Setas "próximo" e "anterior", permite avançar ou recuar as imagens: ATENÇÃO: Esta função é apenas totalmente ativada se o tempo da "próxima imagem" é superior ou igual a sete segundos. Esta função está assim organizada, porque, se esta fosse ativada em tempo reduzido, seria tão rápido que, ao estar ativada ou não seria exatamente igual. Para alterar o tempo da "próxima imagem" basta abrir o ficheiro "jqSlider.js" e seguir os comentários do código. // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = true // Activar para "true";jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo simples de temporizador, apresenta um temporizador em forma de barra: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Personalizações conjuntas: Estilo conjunto de Números + Descrição: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Números + Setas: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = true // Activar para "true";jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Números + Temporizador: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de "Bolas" + Descrição: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = true // Activar para "true";jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de "Bolas" + Temporizador: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = true // Activar para "true";jqSliderVariables.Decription = false // Manter desactivada;jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Descrição + Setas: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = true // Activar para "true";jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Descrição + Temporizador: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Números + Setas + Descrição: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = true // Activar para "true";jqSliderVariables.TimeOfNextImg = false // Manter desactivada;jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de Números + Descrição + Temporizador: // Definições personalizadas;jqSliderVariables.MaxImgsNum = true // Activar para "true";jqSliderVariables.MaxImgBalls = false // Manter desactivada;jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Estilo conjunto de "Bolas" + Descrição + Temporizador: // Definições personalizadas;jqSliderVariables.MaxImgsNum = false // Manter desactivada;jqSliderVariables.MaxImgBalls = true // Activar para "true";jqSliderVariables.Decription = true // Activar para "true";jqSliderVariables.Arrows = false // Manter desactivada;jqSliderVariables.TimeOfNextImg = true // Activar para "true";jqSliderVariables.ImageLink = false // Activar para "true", caso contenha link's; Download's:Ficheiro (jqSlider.js)Ficheiro (jqSliderStyle.css)Ficheiro (jquery.min.js)Download Completo Espero que tenham gostado e que aproveitem ao máximo. Esta versão para já é uma versão Beta, pois talves ainda fassa alguns upgrades nomeadamente no código. Qualquer duvida, ou reportações a fazer já sabem messagem aqui no forum ou: [*]SKYPE: tiago.reis.santos [*]E-Mail: [email protected] Obrigado e cumprimentos :) 10 яэ∂вэяяý, Vitor Pinho ☮, ɓʀuɳѳ' ИИ#92 and 7 others reacted to this Share this post Link to post Share on other sites
KillMe 138 Posted April 17, 2013 gostei http://cyber-gamers.org/public/style_emoticons/default/451960.gif Share this post Link to post Share on other sites
Vitor Pinho ☮ 1,199 Posted April 17, 2013 Obrigado pela partilha. http://cyber-gamers.org/public/style_emoticons/default/451960.gif Share this post Link to post Share on other sites
Ƭiαgѳ ઽαทƬѳઽ 188 Posted April 17, 2013 Obrigado, espero que aproveitem e disfrutam ao máximo :D Correcção, no código final esquesime de iniciar a tag &--#60;body&--#62;... Código final corrigido: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqSlider Demonstração de Download</title> <!-- Chamada da folha de estilo do jqSlider --> <link type="text/css" rel="stylesheet" media="all" href="./jqSliderStyle.css" /> <!-- Chamada do jqSlider e da biblioteca JQuery --> <script type="text/javascript" src="./jquery.min.js"> </script> <script type="text/javascript" src="./jqSlider.js"> </script> <!-- Chamada da função principal do jqSlider --> <script type="text/javascript"> $(document).ready(function() { jqSlider(); // Chamada da função "jqSlider()" }); </script></head><body> <!-- <[jqSlider: Elementos HTML]> --> <div class="jqSliderBox"> <div class="jqSliderLoadElements"></div> <div class="jqSliderReady"> <div class="jqSliderImgHref"></div> <div class="jqSliderBoxMaxImages"></div> <div class="jqSliderBoxImgsArrowLeft" onClick="jqSliderBack()"></div> <div class="jqSliderBoxImgsArrowRight" onClick="jqSliderNext()"></div> <div class="jqSliderBoxImgs"> <!-- <[jqSlider: Adicionar a baixo o código das imagens]> --> <img src="./jqSliderImages/1.jpg" id="1" jqSliderTitle="Titulo" jqSliderConcent="Descrição" jqSliderImageLink="" /> </div> <div class="jqSliderBoxInfos"> <div class="jqSliderBoxInfosTitle"></div> <div class="jqSliderBoxInfosConcent"></div> </div> <div class="jqSliderBoxTimeOfNextImage"><div></div></div> </div> </div> <!-- <[jqSlider: Elementos HTML][END]> --></body></html> 1 Henrique Oliveira reacted to this Share this post Link to post Share on other sites
quenii 981 Posted April 18, 2013 Tópico muito bem organizado e informativo, nice jobCumprimentos Share this post Link to post Share on other sites
Henrique Oliveira 683 Posted April 21, 2013 Obrigado por partilhares http://cyber-gamers.org/public/style_emoticons/default/451960.gif 2 Ƭiαgѳ ઽαทƬѳઽ and Origin. reacted to this Share this post Link to post Share on other sites
