PDA

View Full Version : Help w/Ultimate Fade-in slideshow (v2.4) getting description



ScottDB
09-02-2011, 03:45 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I have it working but just have the regular automatic slideshow working. Would like to have the automatic slideshow w/description and hyperlinks as shown in the bottom left demo. Can anyone help me on how to do it. I didn't see any instructions for this or I am not understanding what it is saying.

jscheuer1
09-02-2011, 04:02 AM
If you read through the instructions carefully, it does explain it. But this may help, here's the 'init' (the on page call for that slideshow) with the key options highlighted:


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../dynamicindex4/pool.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice cold swim."],
["../dynamicindex4/cave.jpg", "http://en.wikipedia.org/wiki/Cave", "", "I'd love to explore some caves someday."],
["../dynamicindex4/fruits.jpg", "", "", "Eat your fruits, it's good for you!"],
["../dynamicindex4/dog.jpg", "", "", "I wish I could be a dog sometimes!"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Only the first two images are linked, but following the pattern I think you can see how to link the rest. The other highlights in the imagearray area are the descriptions.

ScottDB
09-02-2011, 06:24 AM
Thank you

ScottDB
09-02-2011, 10:41 AM
I just noticed that I am using version 1.51. big difference. I think I may have given someone the wrong information thinking I was using the updated version on another post.

Got the version I am using as an add on from the zen cart forum for my zen cart site.

jscheuer1
09-02-2011, 11:09 AM
That's OK, I caught that and deleted it. The way to deal with that is using style, see:

http://www.dynamicdrive.com/forums/showpost.php?p=253368&postcount=2

Only use transparent instead of #fff. But regardless of which version of the script one's using, and regardless of which method one employs, using transparent as a background can cause bleed through if the images are of differing sizes, and/or contain their own transparent or semi-transparent sections. In cases like those one needs to use the background-image from the element behind the slideshow and try to align it properly using background-position. With some layouts it can't be done.

Anyways, back to your issue. You would have to update to the current script to get those features. Have you, or is that a problem?

ScottDB
09-03-2011, 12:52 AM
Thanks for the reply. The transparency explains the bleed through on a couple of images that are differnt size.

Yes I would like to update this but I'm new to using the zen cart script and have only been working on the web for about a couple of years now with no training. Just learning as I go. I'll try it first and see if I can do it.

ScottDB
09-05-2011, 09:41 PM
Well I l thoght I could do it but I guess not. Could use some help here. Trying to install this on a Zen Cart site. It's kind of limited as to placing stuff in header and things but with the previous version everything except the js script was placed in one area. Tried doing that but got images saying something like this tinyurl image is no longer available or something. this is what I was trying to add. I figured the ones I did edit on the first one would at least show up.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/image0.jpg", "index.php?main_page=product_info&cPath=1&products_id=4", "some info about "],
["images/image1.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["images/image3.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--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: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

<div id="fadeshow1"></div>

<br />

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

jscheuer1
09-06-2011, 01:14 AM
These images (the next and previous images for the second slideshow) are no longer available:



<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> . . .
<img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>

However, these images (the imagearray images for the second slideshow) are available:



["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!


And, if I copy the code from your post and save it in a folder that has the fadeslideshow.js file in it, the second slideshow works.

So, if you weren't seeing at leas that - demo of your code:

http://home.comcast.net/~jscheuer1/side/inmotion/js/scottdb_h.htm

There's some other problem - other than the missing next/previous images.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.