Jump to content

Simple image gallery


son
 Share

Recommended Posts

I did a search for a gallery where one photo is displayed at a time and you can use forward and back buttons to go through all shots... Seems there is a lot out there with more enhanced features and/or often with controls inside the photo. I am after one where controls are under the photo, you can click forward and backward and there is a nice transition going from photo to photo. Has anyone of you used a gallery like this before and where could I find sample code etc? I have looked now for some time, but it seems all to be different to what I am after...Thanks,Sonja

Link to comment
Share on other sites

I've made my own with a little assistance from jQuery for the fading. What you're asking for is basically just a couple of functions and then something to handle the transition. Adding a little server-side support for getting images from a folder on the server wouldn't be that hard to implement either.

Link to comment
Share on other sites

You could easily write this in JQuery if you've having trouble finding something useful.Simple HTML Example-

<div id='gallery'>   <img src='xxx'/>   <div id='imageBack'></div>   <div id='imageForward'></div></div><div id="imageHolder" class='hidden'>   <img src='xxx' id='image_1'/>   <img src='xxx' id='image_2'/>   <img src='xxx' id='image_3'/></div>

Simple JQuery Example-

window.imagePos = 1;window.moveImageTo = function(pos){   numImages = $("#imageHolder > div").size();      if(pos < 1)	  pos = numImages;   else if(pos > numImages)	  pos = 1;      window.imagePos = pos;   newSrc = $("#image_" + pos).attr("src");   $("#gallery img").fadeOut("fast", function()   {	  //Make sure you wait until the fade is finished by using a function parameter	 	  $(this).attr("src", newSrc);	  $(this).fadeIn("fast");   });}$("#imageBack").click(function(){   window.imagePos--;   window.moveImageTo(window.imagePos);});$("#imageForward").click(function(){   window.imagePos++;   window.moveImageTo(window.imagePos);});

Edited by MrFish
Link to comment
Share on other sites

Sorry, guys. I am very, very ignorant when it comes down to Javascript. I have produced a file called test.htm as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">                                         window.imagePos = 1;window.moveImageTo = function(pos){   numImages = $("#imageHolder > div").size();     if(pos < 1)      pos = numImages;   else if(pos > numImages)      pos = 1;     window.imagePos = pos;   newSrc = $("#image_" + pos).attr("src");   $("#gallery img").fadeOut("fast", function()   {      //Make sure you wait until the fade is finished by using a function parameter          $(this).attr("src", newSrc);      $(this).fadeIn("fast");   });}$("#imageBack").click(function(){   window.imagePos--;   window.moveImageTo(window.imagePos);});$("#imageForward").click(function(){   window.imagePos++;   window.moveImageTo(window.imagePos);}); </script> </head><body><div id='gallery'>   <img src='img/pic1.jpg'/>   <div id='imageBack'></div>   <div id='imageForward'></div></div><div id="imageHolder" class='hidden'>   <img src='img/pic1.jpg' id='image_1'/>   <img src='img/pic1.jpg' id='image_2'/>   <img src='img/pic1.jpg' id='image_3'/></div></body></html>

and put it along with jquery.js (which I downloaded from http://code.jquery.com/jquery-1.6.1.js) into the root folder. I also put three images in 'img' folder that sits in root. To make sure there are no issues working locally (which seem to happen with Javascript stuff a lot) I uploaded test.htm to web server, but it also does not work. All four images show as they are on page. No images hidden or back/forward option.Where am I going wrong?Son

Link to comment
Share on other sites

Just to say that I found one jquery example on a website that does exactly what I am after when it comes down to display and fade in/out. It works on my web server and have now only to try to make it work with a more database driven, dynamic version of an image gallery... Wish me luck!Cheers,Son

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...