PDA

View Full Version : fadeslideshow - mutiple on same page



annasue
02-09-2013, 04:19 PM
1) Script Title: fadeslideshow

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

3) Describe problem: Please see:

triadproperties.com

I need to replace those 3 slideshows with fadeslideshow since they will not display on an Apple device. I have copied the code and placed it where it needs to go. However, see:

webs2impres.com/test_slide_shows.html

to see what is happening. I used this code successfully on many website but only with one occurence on a page.

jscheuer1
02-09-2013, 04:34 PM
The server:

webs2impres.com

cannot be found. This one:

webs2impress.com

is OK. But has no page:

test_slide_shows.html

on it.

One thing I can tell you is that you need separate and unique ids for each slideshow's div and these each must be reflected in the three on page initializations. You can't have three 'fadeshow1' divs.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

annasue
02-09-2013, 04:50 PM
It is webs2impress.com/index_test_slideshows.html

jscheuer1
02-09-2013, 05:29 PM
In each of the on page initializations, on their third image, there's an extra " mark, example (highlighted red):


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [205, 164], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images_fading/3322-West-End-pic_out.jpg", "", "", ""],
["images_fading/Nortel_out.jpg", "", "", ""],
["images_fading/The-Belvedere.jpg", "", "", """] //<--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: "always",
togglerid: ""
})

By the way, if you have no links or captions you don't need any of those, they can be like:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [205, 164], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images_fading/3322-West-End-pic_out.jpg"],
["images_fading/Nortel_out.jpg"],
["images_fading/The-Belvedere.jpg"] //<--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: "always",
togglerid: ""
})

There could also be other problems, but that much has to be fixed first and may be the only problem.

The browser cache may need to be cleared and/or the page refreshed to see changes.

annasue
02-09-2013, 05:39 PM
Thank you so much! The first and third are now working but not the second. Also, why is the line showing under the slideshows? I do not want that.

jscheuer1
02-09-2013, 05:58 PM
Again, there could still be other problems but:

West-Oak_Commons_out.jpg

is a 404 Not Found. There is a:

West-Oak-Commons_out.jpg

image though, use that.

The browser cache may need to be cleared and/or the page refreshed to see changes.

I don't see a line, unless you mean a blank line. If you do, get rid of the p elements:


<td width="33%" height="164"><p align="center"><div id="fadeshow1"></div></p></td>
<td width="33%" height="164"><p align="center"><div id="fadeshow2"></div></p></td>
<td width="34%" height="164"><p align="center"><div id="fadeshow3"></div></p></td>

annasue
02-09-2013, 08:10 PM
That was it! Thank you so much for your help.

annasue
02-10-2013, 09:42 PM
Can you tell me why there is a narrow line underneath each slideshow? I have searched for a border property that could be set to black and have checked the table background color. I cannot determine where it is coming from at:

webs2impress.com/index_test_slideshows.html

jscheuer1
02-11-2013, 03:51 AM
What browser(s) and OS(es)? I'm just not seeing that here under Win 7 in IE 10 (IE 7, 8, 9, and 10 modes), Chrome, Firefox, or Opera.

annasue
02-11-2013, 01:48 PM
49344935I have screenshots showing the line visible in Safari (latest OS) and I/E 8.0.

jscheuer1
02-11-2013, 08:58 PM
Oddly it does appear in the actual IE 8 under Win XP. But not all the time. Using that browser's developer tools, I cannot identify the element involved. It has a point and click way of identifying elements, but even at 400% magnification the line is still only 1px high so doesn't present much of a target. Looking above and below in the DOM tree yields nothing either.

However I did notice that the page is in quirks mode. If I use standards mode, it appears to go away. To test that out, change:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to:


<!DOCTYPE html>

Or, if you want the closest standards invoking DOCTYPE to the one it already has, you can use:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I cannot be certain if that will fix it because, as I say, the lines didn't appear all the time in IE 8 anyway. I did try it numerous times though and the lines never came back in IE 8 standards mode. I also tried Safari Win (I have no Mac to test on), but it didn't show the lines. This may fix it in your Safari Mac too. Just no promises.

The page will need to be refreshed to see changes. The browser cache may need to be cleared first as well.

annasue
02-12-2013, 05:40 PM
I tried both lines of code and neither made any difference in I/E.

jscheuer1
02-12-2013, 06:05 PM
Fixed on IE 8 here under Win XP. Are you sure you cleared the browser cache and refreshed the page? If so, and it's still doing that, hit F12 and make sure it's rendering in Browser mode IE8 and Document Mode IE8 Standards. IE8 Compat View with IE7 Standards seem to work as well. Full IE 7 mode is fime too, just not IE8 Browser with Quirks Mode

Also, what OS are you running IE 8 under? Is it a genuine copy of IE 8, not a tester version or standalone?

annasue
02-12-2013, 06:22 PM
I cleared my cache and it is still not working. OS XP Pro, IE 8. When I press F12, I get this: DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" Not sure what that means. My IE 8 was downloaded from the right place.

jscheuer1
02-12-2013, 08:29 PM
I meant to check above that, along the top of the developer tools window it shows the Browser Mode and the Document Mode.

In any case, if those are anything other than Browser Mode IE 8 and Document Mode Quirks Mode, there are no lines for me, and even if each are those, I only see the lines sometimes. I too am Using Win XP Pro and a real IE 8 browser. Both are up to date though because I maintain that machine with automatic update. That might be a difference.

I get the impression from you that in your IE 8 and Safari browsers that these lines are always there. If so that would be another difference.

In any case, I just thought of one thing that might fix this, which is changing the background color of the slideshows. To do that, put this in a stylesheet for the page:


#fadeshow1, #fadeshow2, #fadeshow3, .gallerylayer {
background-color: white !important;
}

Use the !important keyword as shown to override the scripted black background.

Again - The browser cache may need to be cleared and/or the page refreshed to see changes.

annasue
02-13-2013, 05:21 PM
Thanks, but that didn't help...even with clearing cache.

jscheuer1
02-13-2013, 10:04 PM
This may be very hard to diagnose because you're seeing something different than what I'm seeing. However, since the code I suggested is not on the demo page at:

webs2impress.com/index_test_slideshows.html

I have no way of knowing if it's having any effect at all. Please put it in the head of that page as a stylesheet:


<style type="text/css">
#fadeshow1, #fadeshow2, #fadeshow3, .gallerylayer {
background-color: white !important;
}
</style>

or incorporate its rule into the existing stylesheet for the page.

And please confirm whether or not you're seeing those lines in IE 8 all the time or just some of the time.

annasue
02-14-2013, 03:01 PM
That appeared to fix it! Thank you so much!