Last active
March 5, 2018 00:28
-
-
Save ivanhoe011/04869642f0679e843f26 to your computer and use it in GitHub Desktop.
Load Flickr gallery
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> | |
| <head></head> | |
| <body> | |
| <div> | |
| <div id="carousel"> | |
| <!-- | |
| <div> | |
| <a href="images/dog-1.png" title="Dog" data-hover="Sandy the west highland terrier" data-toggle="lightbox" class="lightbox"> | |
| <img src="images/dog-1.png" alt="Dog" /> | |
| </a> | |
| </div> | |
| <div> | |
| <a href="images/dog-2.png" title="Dog" data-hover="Marty the yorkshire terrier" data-toggle="lightbox" class="lightbox"> | |
| <img src="images/dog-2.png" alt="Dog" /> | |
| </a> | |
| </div> | |
| [...] | |
| --> | |
| </div> | |
| <div id="pager" class="pager"></div> | |
| </div> | |
| <script> | |
| jQuery( function ($) { | |
| load_gallery( $('#carousel') ); | |
| function load_gallery($container) { // currently it's Flickr stream | |
| var flickr_api_key = '*******', | |
| nsid = '******'; | |
| $.getJSON('http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&nojsoncallback=1', { | |
| api_key : flickr_api_key, | |
| user_id : nsid, | |
| per_page : 6 | |
| }) | |
| .fail( function (error) { alert('There was an error while loading image gallery, please try to refresh the page.'); } ) | |
| .done( function (data) { | |
| $.each(data.photos.photo, function (i, item) { | |
| $('<div />') | |
| .append( $('<a />', { | |
| href : 'http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg', | |
| title : item.title, | |
| target: '_blank', | |
| 'data-hover' : item.title, | |
| 'data-toggle' : 'lightbox', | |
| 'class' : 'lightbox' | |
| }) | |
| .append( $('<img />', { | |
| src : 'http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_n.jpg', | |
| alt : '' | |
| }) ) | |
| ).appendTo( $container ); | |
| }); // end $.each | |
| }) | |
| .done( function () { | |
| // moved here from custom.js | |
| if ($("#carousel").length > 0){ | |
| $('#carousel').carouFredSel({ | |
| responsive: false, | |
| scroll: 1, | |
| pagination: "#pager", | |
| items: { | |
| width: 374, | |
| visible: { | |
| min: 4, | |
| max: 20 | |
| } | |
| } | |
| }); | |
| } | |
| // delegate calls to data-toggle="lightbox" | |
| $(document).delegate('*[data-toggle="lightbox"], .lightbox', 'click', function(event) { | |
| event.preventDefault(); | |
| return $(this).ekkoLightbox({ | |
| type : 'image', | |
| onShown: function() { | |
| if (window.console) { | |
| return console.log('Checking our the events huh?'); | |
| } | |
| } | |
| }); | |
| }); | |
| }); // end done | |
| } // end function load_gallery | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment