Last active
January 23, 2016 15:11
-
-
Save valdiney/5413938 to your computer and use it in GitHub Desktop.
Paginação com php " Script em php puxa imagens contidas em uma pasta que neste caso se chama "imagens" . Em seguida apresenta as imagens no navegador com um simples sistema de paginação. O script (js) com sintaxe (jQuery) contido neste exemplo faz um pequeno sistema de zoom nas imagens apresentadas.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!Doctype html> | |
| <html lang="pt"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <script src="js/jquery-1.6.4.min.js"></script> | |
| <script src="js/zoom_imagens.js"></script> | |
| <link rel="stylesheet" href="css/style.css"></style> | |
| <title>Paginação com php</title> | |
| </head> | |
| <body> | |
| <?php | |
| /////////////////////////////////////////// | |
| // (PHP) | |
| // SCRIPT APRESENTA NO NAVEGADOR IMAGENS CONTIDAS NA PASTA "IMAGENS" | |
| // EM FORMA DE PÁGINAÇÃO | |
| ////////////////////////////////////////// | |
| $arquivo = glob('imagens/*.*'); | |
| ////////////////////////////////////////// | |
| // "$quantidade " QUANTIDADE DAS IMAGENS QUE VAI APARECER NA PÁGINAÇÃO | |
| $quantidade = 8; | |
| ////////////////////////////////////////// | |
| $atual = (isset($_GET['pg'])) ? intval($_GET['pg']) : 1; | |
| $pega_arquivo = array_chunk($arquivo, $quantidade); | |
| $contar = count($pega_arquivo); | |
| $resultado = $pega_arquivo[$atual-1]; | |
| ?> | |
| <div id="imagens"> | |
| <?php | |
| ///////////////////////////////////// | |
| // APRESENTA AS IMAGENS | |
| foreach($resultado as $valor){ | |
| printf('<img id="id_image" src="%s" width="100" />', $valor); | |
| } | |
| //////////////////////////////////// | |
| /////////////////////////////////// | |
| // MENU DE PAGINAÇÃO E ZOOM | |
| echo '<br/><hr>'; | |
| for($i =1; $i < $contar; $i++){ | |
| if($i == $atual){ | |
| printf('<a class="pag" href="#"id="focus">( %s )</a>', $i); | |
| }else{ | |
| printf('<a class="pag" href="?pg=%s"> %s </a>', $i, $i); | |
| } | |
| } | |
| printf('<button type="button" id="button_toggleImage">zoom</button>'); | |
| ///////////////////////////////// | |
| ?> | |
| </div><!--end imagens--> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Definições dos links da paginação*/ | |
| .pag{ | |
| display:block; | |
| float:left; | |
| width:30px; | |
| padding:5px; | |
| background-color:silver; | |
| color:black; | |
| text-decoration:none; | |
| margin-left:3px; | |
| text-align:center!important; | |
| border:1px solid white; | |
| } | |
| .pag:hover{ | |
| color:white; | |
| background-color:black; | |
| } | |
| #focus{ | |
| color:white; | |
| background-color:black; | |
| } | |
| /*Fim links da paginação*/ | |
| #imagens{ /*Identificador da div que apresenta as imagens*/ | |
| width:auto; | |
| background-color:; | |
| padding:10px; | |
| } | |
| #imagens img{ | |
| border:1px solid white; | |
| margin-left:3px; | |
| padding:10px; | |
| -webkit-transition-duration:0.1s; | |
| -moz-transition-duration:0.1s; | |
| -o-transition-duration:0.1s; | |
| } | |
| #imagens img:hover{ | |
| background-color:#d8d7d7; | |
| box-shadow:1px 1px 5px; | |
| -webkit-transform:scale(1.2); | |
| -moz-transform:scale(1.2); | |
| -o-transform:scale(1.2); | |
| -webkit-transition-duration:0.5s; | |
| -moz-transition-duration:0.5s; | |
| -o-transition-duration:0.5s; | |
| border:1px solid transparent; | |
| } | |
| #button_toggleImage{ | |
| padding:5px; | |
| background-color:black; | |
| color:#00ccff; | |
| border:1px solid white; | |
| } | |
| hr{ | |
| opacity:0.30; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = function(){ | |
| $(document).ready(function(){ | |
| /////////////////////////////////////////////////////// | |
| // (JS) | |
| // SCRIPT APLICA UM WIDTH NAS IMAGENS DEFINIDO NA VARIAVEL "width_image" | |
| // AUTOR: VALDINEY FRANÇA | |
| ////////////////////////////////////////////////////// | |
| var vetorCaptionButton = ['zoom +','zoom -']; | |
| var width_imageZoom = "200px"; | |
| var button_zoomToggle = $("#button_toggleImage").toggle( | |
| /////////////////// | |
| // FUNCTION ZOOM_MORE AUMENTA AS IMAGENS | |
| ////////////////// | |
| function zoom_more(){ | |
| var id_image = $("#imagens img").css("width",width_imageZoom); | |
| $("#button_toggleImage").text(vetorCaptionButton[0]); | |
| }, | |
| /////////////////// | |
| // FUNCTION ZOOM_LESS DIMINUI | |
| ////////////////// | |
| function zoom_less(){ | |
| var id_image = $("#imagens img").css("width","100px"); | |
| $("#button_toggleImage").text(vetorCaptionButton[1]); | |
| } | |
| ); | |
| });//END JQUERY | |
| }//END WINDOW |
faz um screen cast mostrando ele funcional pls!!
Vou preparar o screen cast!!
Olá Amigos, tem um site http://scriptmania.com.br que tem muitos scripts para downloads gratuitos, oque vc acha deste site.
Outro dia estava pesquisando na net sobre scripts themeforest, codecanyon e este site script-mania tem muitos scripts deste gênero,
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
$quantidade = 8 ( neste exemplo vai aparecer 8 imagens em cada paginação. )