https://github.com/creotiv/jquery-photowall

jQuery photo wall gallery plugin (like in google)
https://github.com/creotiv/jquery-photowall

Last synced: about 2 months ago
JSON representation

jQuery photo wall gallery plugin (like in google)

• Host: GitHub
• URL: https://github.com/creotiv/jquery-photowall
• Owner: creotiv
• Archived: true
• Created: 2011-12-23T16:08:58.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2019-09-02T13:40:16.000Z (about 5 years ago)
• Last Synced: 2024-05-02T12:01:02.484Z (5 months ago)
• Language: CSS
• Homepage: http://creotiv.github.io/jquery-photowall
• Size: 816 KB
• Stars: 114
• Watchers: 18
• Forks: 37
• Open Issues: 23
• Metadata Files:
  • Readme: README.rst
  • Changelog: changelog.sh

Awesome Lists containing this project

README

        
=============================================================

      jQuery photo wall gallery plugin (like at google)

=============================================================

Demo

====

- http://creotiv.github.io/jquery-photowall/example.html

- http://creotiv.in.ua/imdb/

How to use

==========

Add three lines to the HEAD:

::

     

     

    

    

Add this to page code:

::

    
 

	    
 

	    
 

    
     


Example 1: Load images from Picasa

::

    

    $(document).ready(function(){

        PhotoWall.init({

            el:             '#gallery'               // Gallery element

            ,zoom:          true                     // Use zoom

            ,zoomAction:    'mouseenter'             // Zoom on action

            ,zoomTimeout:   500                      // Timeout before zoom

            ,zoomDuration:  100                      // Zoom duration time

            ,showBox:       true                     // Enavle fullscreen mode

            ,showBoxSocial: true                     // Show social buttons

            ,padding:       10                       // padding between images in gallery

            ,lineMaxHeight: 150                      // Max set height of pictures line

                                                     // (may be little bigger due to resize to fit line)

        });

        

        /*

        

            Photo object consist of:

            

            {   // big image src,width,height and also image id

                id:

                ,img:       //src

                ,width:

                ,height:

                ,th:{   

                    src:      //normal thumbnail src

                    zoom_src: //zoomed normal thumbnail src

                    zoom_factor: // factor of image zoom

                    ,width:   //width of normal thumbnail

                    ,height:  //height of normal thumbnail

                }

            };

        

        */

        

        //For example one of my gallery at Picasa

        $.ajax({

		    url: 'https://picasaweb.google.com/data/feed/api/user/118283508237214694671/albumid/5685978516288199793'

			     +'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:'

			     +'content))&imgmax=720',

		    dataType: 'jsonp',

		    success: function(data){

		        var photos = {}

	            if(!data.feed.entry) return;

	            for(var i in data.feed.entry) {

		            var e     = data.feed.entry[i].media$group;

		            var id    = data.feed.entry[i].gphoto$id.$t;

		            

		            var t1h   = e.media$thumbnail[2].height;

		            var t1w   = e.media$thumbnail[2].width;

		            var t1src = e.media$thumbnail[2].url

		            

		            var t2w   = Math.round(t1w * 1.5);

		            var t2h   = Math.round(t1h * 1.5);

		            var t2src = e.media$content[0].url+'/../../w'+t2w+'-h'+t2h+'/';

	                

	                var bsrc  = e.media$content[0].url;

	                var bw    = e.media$content[0].width;

	                var bh    = e.media$content[0].height;

	                

	                

		            photos[id] = {id:id,img:bsrc,width:bw,height:bh,th:{src:t1src,width:t1w,height:t1h,zoom_src:t2src,zoom_factor:1.5}};

		            

	            }	

		        PhotoWall.load(photos);

	        }

	    });

        

    

    

Example 2: load images from site:

::

    

    $(document).ready(function(){

        PhotoWall.init({

            el:             '#gallery'               // Gallery element

            ,zoom:          true                     // Use zoom

            ,zoomAction:    'mouseenter'             // Zoom on action

            ,zoomTimeout:   500                      // Timeout before zoom

            ,zoomDuration:  100                      // Zoom duration time

            ,showBox:       true                     // Enavle fullscreen mode

            ,showBoxSocial: true                     // Show social buttons

            ,padding:       10                       // padding between images in gallery

            ,lineMaxHeight: 150                      // Max set height of pictures line

                                                     // (may be little bigger due to resize to fit line)

        });

        

        /*

        

            Photo object consist of:

            

            {   // big image src,width,height and also image id

                id:

                ,img:       //src

                ,width:

                ,height:

                ,th:{   

                    src:      //normal thumbnail src

                    zoom_src: //zoomed normal thumbnail src

                    zoom_factor: // factor of image zoom

                    ,width:   //width of normal thumbnail

                    ,height:  //height of normal thumbnail

                }

            };

        

        */

        

        var PhotosArray = new Array(

            {id:id,img:'img_big1.jpg',width:500,height:400,

             th:{src:'img_small1.jpg',width:50,height:40,

                 zoom_src:'img_zoomed1.jpg',zoom_factor:4

                }

            },

            {id:id,img:'img_big2.jpg',width:500,height:400,

             th:{src:'img_small2.jpg',width:50,height:40,

                 zoom_src:'img_zoomed2.jpg',zoom_factor:4

                }

            },

            {id:id,img:'img_big3.jpg',width:500,height:400,

             th:{src:'img_small3.jpg',width:50,height:40,

                 zoom_src:'img_zoomed3.jpg',zoom_factor:4

                }

            },

            {id:id,img:'img_big4.jpg',width:500,height:400,

             th:{src:'img_small4.jpg',width:50,height:40,

                 zoom_src:'img_zoomed4.jpg',zoom_factor:4

                }

            }

        );

		            

        PhotoWall.load(PhotosArray);

	});