son Posted May 25, 2011 Share Posted May 25, 2011 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 More sharing options...
thescientist Posted May 25, 2011 Share Posted May 25, 2011 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 More sharing options...
MrFish Posted May 26, 2011 Share Posted May 26, 2011 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);}); Link to comment Share on other sites More sharing options...
son Posted May 26, 2011 Author Share Posted May 26, 2011 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 More sharing options...
son Posted May 26, 2011 Author Share Posted May 26, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.