img transition / lightbox

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   On some custom pages, I would love to use an image that fades into another image with a link on each image.
As I try to avoid Flash, I'm looking for a javascript based solution. I've found many solutions to it that work when using it on a full empty page, but as soon as the header/footer and/or the include file SmallShoppingCart is used, I get a huge amount of J.S. errors....
I tried to see if I could fins out where this might be coming from and it looks like all the scripts I seem to find are conflicting with the prototype.js file.

My question:
Has anyone have a simple (no asp / j.s. guru here!) solution to make an image transition with +/- 3 images with a link on the image?
This also goes for the Lightbox.

Thanks in advace!

Note:
Currently I'm using PC ver. 3.12a  (updating to ver 4 beginning next year, but like to use the above before then)

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
worldofrugs Members Profile Send Private Message Find Members Posts Add to Buddy List Senior Member Joined: 24-April-2008 Location: United States Status: Offline Points: 0	Post Options Post Reply Quote worldofrugs Report Post Thanks(0) Quote Reply Topic: img transition / lightbox Posted: 26-October-2009 at 11:14am
	On some custom pages, I would love to use an image that fades into another image with a link on each image. As I try to avoid Flash, I'm looking for a javascript based solution. I've found many solutions to it that work when using it on a full empty page, but as soon as the header/footer and/or the include file SmallShoppingCart is used, I get a huge amount of J.S. errors.... I tried to see if I could fins out where this might be coming from and it looks like all the scripts I seem to find are conflicting with the prototype.js file. My question: Has anyone have a simple (no asp / j.s. guru here!) solution to make an image transition with +/- 3 images with a link on the image? This also goes for the Lightbox. Thanks in advace! Note: Currently I'm using PC ver. 3.12a (updating to ver 4 beginning next year, but like to use the above before then)

Justplaying Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 16-August-2007 Location: United Kingdom Status: Offline Points: 0	Post Options Post Reply Quote Justplaying Report Post Thanks(0) Quote Reply Posted: 20-March-2010 at 1:19pm
	Hi I dont know if you solved this issue but I have just used: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm Put this into your header file: <!-- Start New Rollover Image --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="fadeslideshow.js"> /*********************************************** * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [687, 239], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["http://www.yoursite.co.uk/images/home_image1.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""], //<--change image location to suit your site and change hyperlink! ["http://www.yoursite.co.uk/images/home_image2.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""], ["http://www.yoursite.co.uk/images/home_image3.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""], ["http://www.yoursite.co.uk/images/home_image4.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""] //<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script> <!-- End New Rollover Image --> <div id="fadeshow1"></div> --------------- Put this into your page where you want it Also your will need to download the JS file and put this in the root of the page to display it you can also change the dimensions of the image by altering the: Slideshow dimensions: [687, 239], Hope this helps uploads/638/fadeslideshow.zip