Using Ultimate Fade-in Slideshow v 2.4 issue

**cloudbase** · 01-11-2012, 04:12 AM

1) Script Title: Ultimate fade Slide Show 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Works in IE but not FF-Opera-Safari-Chrome.
test site at www.okparagliding.com/testing/html/weather.com
ps. great script and instructions I'm sure it's my fault---sorry!

**jscheuer1** · 01-11-2012, 08:19 AM

This is a tricky one. In most browsers Ultimate Fade cannot initialize inside an element with display: none. I think that's true in IE also, but the Tab script makes all those display block and then hides them with opacity and positioning, which Ultimate Fade could work with, but the way the code is in the head now, it happens after Ultimate Fade. I guess it's in time for IE, obviously not for those others.

And, except for the fact that Ultimate Fade puts jQuery into noConflict mode, there's no reason to have two copies of jQuery on the page. So reorganize the head so that Ultimate Fade comes after the other scripts and have it put jQuery back into normal mode, while commenting out the second instance of jQuery, In other words, replace your head with this one:

Code:

<head>
<title>Weather</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="NetObjects (http://netobjects.com)">
<!-- Page always needs to be UPDATED -->
<meta http-equiv="Cache-Control" content="no-cache">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



<style type="text/css">
html {
overflow-y: scroll;
}
</style>
<script type="text/javascript">
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</script>
<script type="text/javascript" src="../assets/rollover.js">
</script>
<!-- <script type="text/javascript" src="../assets/jquery.js">
</script> comment out second instance of jQuery -->
<script type="text/javascript" src="../assets/easing.js">
</script>
<script type="text/javascript" src="../assets/tabs.js">
</script>
<script type="text/javascript" src="../assets/togglepane.js">

</script>
<script type="text/javascript" src="../assets/accordion.js">
</script>
<script type="text/javascript" src="../assets/NOF_MLR.js">
</script>
<link rel="stylesheet" type="text/css" href="../html/fusion.css">
<link rel="stylesheet" type="text/css" href="../html/style.css">
<link rel="stylesheet" type="text/css" href="../html/site.css">
<link rel="stylesheet" type="text/css" href="../html/MLR.css">
<link rel="stylesheet" type="text/css" href="../html/MlrProgChartstab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MlrMesonetDetailtab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MlrJetDetailtab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MlrProgDetailtab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MultiLayoutRegion5tab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MultiLayoutRegion6tab_top.css">
<link rel="stylesheet" type="text/css" href="../html/MultiLayoutRegion7tab_top.css">
<style type="text/css" title="NOF_STYLE_SHEET">
<!--

div#NavigationBar1_1LYR { 
position:absolute; visibility:hidden; top:0; left:0; z-index:1001;
}
-->

</style>

<script type="text/javascript" src="./weather_nof.js">
</script>
<script type="text/javascript" src="../assets/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 $ = jQuery // return jQuery to normal mode
var mygallery=new fadeSlideShow({
	wrapperid: "jetstream", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 750], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://okparagliding.com/db/WeatherbankImages/jsnh-000.gif"],
		["http://okparagliding.com/db/WeatherbankImages/jsnh-012.gif"],		
		["http://okparagliding.com/db/WeatherbankImages/jsnh-024.gif"],		
		["http://okparagliding.com/db/WeatherbankImages/jsnh-036.gif"],		
		["http://okparagliding.com/db/WeatherbankImages/jsnh-048.gif"],		
		["http://okparagliding.com/db/WeatherbankImages/jsnh-060.gif"],		
		["http://okparagliding.com/db/WeatherbankImages/jsnh-072.gif"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
var mygallery=new fadeSlideShow({
	wrapperid: "progcharts", //ID of blank DIV on page to house Slideshow
	dimensions: [640, 480], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.aviationweather.gov/adds/data/progs/hpc_sfc_analysis.gif"],
		["http://www.aviationweather.gov/adds/data/progs/hpc_12_fcst.gif"],
		["http://www.aviationweather.gov/adds/data/progs/hpc_24_fcst.gif"],
		["http://www.aviationweather.gov/adds/data/progs/hpc_36_fcst.gif"],
		["http://www.aviationweather.gov/adds/data/progs/hpc_48_fcst.gif"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
var mygallery=new fadeSlideShow({
	wrapperid: "wind", //ID of blank DIV on page to house Slideshow
	dimensions: [680, 660], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.aviationweather.gov/adds/data/winds/ruc01hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc02hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc03hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc04hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc05hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc06hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc07hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc08hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc09hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc10hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc11hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc12hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc13hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc14hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc15hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc16hr_sfc_wind.gif"],
		["http://www.aviationweather.gov/adds/data/winds/ruc17hr_sfc_wind.gif"],	
		["http://www.aviationweather.gov/adds/data/winds/ruc18hr_sfc_wind.gif"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 200, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

</head>

Tested and works here in Firefox, Chrome, Safari, and Opera. And still works in IE.

**cloudbase** · 01-11-2012, 03:49 PM

WOW!!!!!!!!!
Thank you very much John. I had a feeling it was the second instance but did not know how to resolve it.
Don't know how you come up with the time and energy to deal with us mortals but I sure appreciate that you do.
Ron

Thread: Using Ultimate Fade-in Slideshow v 2.4 issue

Thread Tools

Search Thread

Using Ultimate Fade-in Slideshow v 2.4 issue

Bookmarks

Bookmarks

Posting Permissions