Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/creotiv/jquery-photowall
jQuery photo wall gallery plugin (like in google)
https://github.com/creotiv/jquery-photowall
Last synced: 18 days 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-08-01T00:41:06.445Z (3 months ago)
- Language: CSS
- Homepage: http://creotiv.github.io/jquery-photowall
- Size: 816 KB
- Stars: 114
- Watchers: 18
- Forks: 36
- 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);
});