Page 1 of 1
Creating a photo gallery with rotating thumbnail.
Posted: Sat Jun 11, 2011 10:29 pm
by TonsOfFun
I am not sure how to go about this exactly. I am creating a photo gallery site and when you go to the listing of all the galleries and hover on the thumbnail, it will scroll through 5 different images within the gallery.
I am not sure of the best way to get the images from the database. I have one table that has all the different galleries, and another that has all the photos.
I thought about doing a separate MySQL query for each gallery, but if there are 20-30 galleries then that is a lot of requests.
I also thought about pulling all the pictures I need in one query and using PHP to sort through an array, but I don't know how to specify only 5 images for each gallery from the photos table.
I hope this makes sense and thanks for any help.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Sun Jun 12, 2011 1:48 am
by getmizanur
use jquery (or other similar javascript framework) and ajax to invoke request on demand.
in your ajax, send a request to get five images for a given gallery and display them as you want to.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Sun Jun 12, 2011 6:29 am
by oscardog
I would find a way of doing it server-side rather than a lot of AJAX requests, if the site becomes busy people will simply get fed up waiting for the images to first be retrieved from the database and then the images actually loading.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Sun Jun 12, 2011 12:33 pm
by getmizanur
@oscardog you are right as well however 'on demand' may be a better option. there is no need to generate 5 images for each gallery on the server side when a user may be only hovering over two to three galleries. you can get ajax to trigger a request from hovering over a gallery. this consumes less resources.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Sun Jun 12, 2011 7:53 pm
by TonsOfFun
getmizanur wrote:use jquery (or other similar javascript framework) and ajax to invoke request on demand.
in your ajax, send a request to get five images for a given gallery and display them as you want to.
Awesome.
Do you know of any example out there that you would recommend?
I will definitely look into that.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Mon Jun 13, 2011 1:06 pm
by oscardog
What I would recommend is looking at Twitter. You'll need a decent number of tweets in your feed, but scroll down and you'll notice as you hit the bottom a load more tweets load. You could use a similar system to increase initial page load. The page initally loads 10 images, 5 on screen and 5 invisible. When the next arrow is pressed the 5 images you grabbed initially are displayed and you use AJAX to load the next 5, rinse and repeat.
This
Google result set should provide you with everything you need in terms of jQuery & AJAX.
Re: Creating a photo gallery with rotating thumbnail.
Posted: Tue Jun 14, 2011 5:40 am
by getmizanur
@tonsoffun, you can follow @oscardog tip which is good.
you can also use series of jquery plugins to get it to do what you want. for example to get a thumbnail preview you can use following jquery plugins
1./
http://www.vegabit.com/jquery_bubble_popup_v2/, which creates bubble popup when you hover over a gallery
2./
http://sorgalla.com/projects/jcarousel/, within the bubble popup you can load jquery jcarousel and call 5 images using $.ajax()
also have a look at the link below for inspiration.
http://www.smashingapps.com/2011/01/07/ ... eries.html
if you need further help, you know where to come
Re: Creating a photo gallery with rotating thumbnail.
Posted: Thu Jun 16, 2011 10:21 pm
by TonsOfFun
Thanks so much for this.