jQuery PhotoWall: jQuery plug-in to show a wall of pictures

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (8)   DownloadInstall with Composer Download .zip   Reputation   Support forum (5)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 61%Total: 713 All time: 19 This week: 4Up
Version License JavaScript version Categories
jquery-photowall 0.1GNU General Publi...1.0HTML, jQuery, Graphics
Description Author

This object is a jQuery plug-in to show a wall of pictures.

It can display a list of pictures scaled and tiled inside a given page element.

It can zoom on images when the user drags the mouse over them and stops for a moment.

The images are displayed as links to the original images in the normal size.

Picture of Andrey Nikishaev
Name: Andrey Nikishaev <contact>
Classes: 1 package by
Country: Ukraine Ukraine
Age: 36
All time rank: 301 in Ukraine Ukraine
Week rank: 6 Up1 in Ukraine Ukraine Equal

Details
============================================================= 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: :: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-photowall.js"></script> <link rel="stylesheet" type="text/css" href="jquery-photowall.css"> Add this to page code: :: <div id="gallery"> <div class="body"> </div> </div> Example 1: Load images from Picasa :: <script type="text/javascript"> $(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); } }); </script> Example 2: load images from site: :: <script type="text/javascript"> $(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); }); </script>
Screenshots  
  • Screenshot-1.png
  Files folder image Files  
File Role Description
Files folder imagejquery-photowall (6 files)
Plain text file changelog.sh Data Auxiliary data
Accessible without login Plain text file README.rst Doc. Help

  Files folder image Files  /  jquery-photowall  
File Role Description
  Image file exit.gif Icon Icon image
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file jquery-photowall.css Data Auxiliary data
  Accessible without login Plain text file jquery-photowall.js Class Class source
  Image file loader.gif Icon Icon image
  Plain text file MIT-LICENSE.txt Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
 88%
Total:713
This week:0
All time:19
This week:4Up
User Ratings User Comments (2)
 All time
Utility:91%StarStarStarStarStar
Consistency:87%StarStarStarStarStar
Documentation:70%StarStarStarStar
Examples:-
Tests:-
Videos:-
Overall:61%StarStarStarStar
Rank:37
 
Very Nice script.
10 years ago (Bobby Vaughn)
70%StarStarStarStar
The pictures used in this class are obscene.
10 years ago (shanavas)
40%StarStarStar