Example gallery photos using jQuery (without plugin).
*This a experiment for learn jQuery basic
Last active
October 8, 2020 22:49
-
-
Save tcelestino/5119094 to your computer and use it in GitHub Desktop.
Gallery photos with jQuery (no plugin)
This file contains hidden or 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
| function galeria(url) { | |
| var $img = $('#fotoGrande img:first'); | |
| var $loader = $(".loading"); | |
| $loader.show(); | |
| $img.fadeOut('normal', function(){ | |
| $img.attr('src', url); | |
| }); | |
| $img.load(function(){ | |
| $img.fadeIn('normal'); | |
| $loader.hide(); | |
| }); | |
| if($img[0].complete) { | |
| $img.fadeIn('normal'); | |
| $loader.hide(); | |
| } | |
| }; | |
| $(document).ready(function() { | |
| jQuery('.thumbs li a').bind('click', function(e) { | |
| galeria($(this).attr('href')); | |
| e.preventDefault(); | |
| }); | |
| $('.thumbs li a:first').trigger('click'); | |
| }); |
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Galeria de Fotos com jQuery</title> | |
| <link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> | |
| <script src="functions.js"></script> | |
| </head> | |
| <body> | |
| <section id="galeria"> | |
| <h1>Galeria de fotos usando jQuery</h1> | |
| <div id="fotoGrande"> | |
| <div class="loading"></div> | |
| <img /> </div> | |
| <ul class="thumbs"> | |
| <li><a href="http://lorempixel.com/output/technics-q-c-640-480-1.jpg"><img src="http://lorempixel.com/output/people-q-c-100-100-9.jpg" alt="" /></a></li> | |
| <li><a href="http://lorempixel.com/output/animals-q-c-640-480-5.jpg"><img src="http://lorempixel.com/output/food-q-c-100-100-2.jpg" alt="" /></a></li> | |
| <li><a href="http://lorempixel.com/output/technics-q-c-640-480-5.jpg"><img src="http://lorempixel.com/output/city-q-c-100-100-3.jpg" alt="" /></a></li> | |
| <li><a href="http://lorempixel.com/output/fashion-q-c-640-480-1.jpg"><img src="http://lorempixel.com/output/abstract-q-c-100-100-9.jpg" alt="" /></a></li> | |
| <li><a href="http://lorempixel.com/output/city-q-c-640-480-10.jpg"><img src="http://lorempixel.com/output/nightlife-q-c-100-100-1.jpg" alt="" /></a></li> | |
| <li><a href="http://lorempixel.com/output/food-q-c-640-480-5.jpg"><img src="http://lorempixel.com/output/sports-q-c-100-100-4.jpg" alt="" /></a></li> | |
| </ul> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or 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
| html, body, h1, ul, li { | |
| margin:0; | |
| padding:0; | |
| } | |
| aside, figcaption, figure, footer, header, section { | |
| display:block; | |
| } | |
| body { | |
| font-size:13px; | |
| font-family: 'Signika Negative', sans-serif; | |
| } | |
| h1 { | |
| margin:20px 0; | |
| padding:5px; | |
| font-size:1.70em; | |
| text-align:center; | |
| color:#000; | |
| background:#F5F5F5; | |
| } | |
| #galeria { | |
| width:640px; | |
| margin:0 auto; | |
| } | |
| #fotoGrande, .loading { | |
| width:640px; | |
| height:480px; | |
| } | |
| .loading { | |
| background:url(ajax-loader.gif) no-repeat 50% 50%; | |
| } | |
| #galeria .thumbs, #galeria .thumbs li { | |
| float:left; | |
| } | |
| #galeria .thumbs { | |
| margin-top:10px; | |
| } | |
| #galeria .thumbs li { | |
| list-style:none; | |
| margin:0 8px 5px 0 | |
| } | |
| #galeria .thumbs li:nth-child(6n) { | |
| margin-right:0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment