Print Page | Close Window

img transition / lightbox

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=3143
Printed Date: 30-April-2024 at 2:08am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: img transition / lightbox
Posted By: worldofrugs
Subject: img transition / lightbox
Date 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)



Replies:
Posted By: Justplaying
Date 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 - uploads/638/fadeslideshow.zip



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net