img transition / lightbox |
Post Reply |
Author | |
worldofrugs
Senior Member Joined: 24-April-2008 Location: United States Status: Offline Points: 0 |
Post Options
Thanks(0)
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
Newbie Joined: 16-August-2007 Location: United Kingdom Status: Offline Points: 0 |
Post Options
Thanks(0)
|
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 |
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |