View Full Version : Adding a Magnify link to the Ultimate Fade-in slideshow (v2.4)

07-30-2010, 03:04 AM
I have similar question for displaying bigger images. I like this fadeslideshow very much and it works great. Just wondering in the “imagearray”, for example
imagearray: [
["images.gif ", "bigImage.html", "_new", "<p>Description</p>"],
["images2.gif ", "bigImage2.html", "_new", "<p>Description2</p>"]
1. I have put a link in the second field in the array. The link works fine, but the problem is the cursor. For the description’s images of restore.png and x.png, they defined as “cursor:hand;cursor:pointer;” , so when hover on it, a hand will appear for click as same as it hover on the link of the html page link of bigImage.html, bigImage2.html, etc. That is very confusing for the click of the restore.png or x.png with the html page link. I just wondering if there is a way I can separate them such as hover on restore.png or x.png with hand, and the html link as a magnify image?
2. I have see the jQuery Image Magnify v1.1, link: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
Since the slideshow images are fixed size, I just wondering if there is a way that I can combine them as when I click on any of the slide it will show a larger image?

08-03-2010, 05:49 AM
Script: Ultimate Fade-in slideshow (v2.4)
DD: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Since there was no reply for my posting, I think my posting format is not right. So here it is again: I am trying to use a magnify image instead the cursor of hand is not working.

I am trying to make a photo gallery page that contains 15 to 20 photos. By using the script of Ultimate Fade-in slideshow (v2.4) for the page, it works great. I have separated the code in two parts, one is menu and the other is auto. The code like this:
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1",
dimensions: [950, 450],
imagearray: [
["images.gif ", "bigImage.html", "_new", "<p>Description</p>"],
["images2.gif ", "bigImage2.html", "_new", "<p>Description2</p>"]

displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""

displaymode: {type:'manual', pause:5500, cycles:0, wraparound:false},
persist: false,
fadeduration: 500,
descreveal: "always",
togglerid: "fadeshow2toggler"

I have put a link for second field in the imagearray for every photo to show bigger image links: “bigImage.html”, “bigImage2.html”, etc. So when the mouse hovers on the image, a hand will appear for the link. However, I was told by a few friends that they got confused between the description’s hand with the link’s hand, sometimes, when they wanted to click on the description’s restore or close (x), they got a pop up window for the bigger image’s link page…
Some of the photo’s description is very long, so when it in the display mode, the description all the way up and covered partial images, the restore.png or x.png images look like inside of the bigger image link, besides me, no one knows where they should click.

So, I am trying to use a magnify image for the html link to separate the restore and close:
["images.gif ", "bigImage.html class=’magnify’ title=’view bigger image’ ", "_new", "<p>Description</p>"]…, then the page stopped working. I tried to change the cursor in css file, no luck, failed. I just wording, if there is a way I can have the magnify image for the link and the hand for the restore or close description?