Fade-in Slideshow: dynamic sizing/centering && jQuery.noConflict() conflict

**traq** · 09-13-2009, 11:54 PM

1) Script Title: Ultimate fade-in slideshow v2.0

2) Script URL (on DD): fade-in slideshow

3) Describe problem: Two issues. First:

It seems that the function "jQuery.noConflict()" on line 15 of the script is causing some sort of jQuery conflict. ( ??? )

When I set everything up as directed, I got no slideshow. Nothing at all, not even errors. I spent quite some time trying to solve it, until I realized that no scripts using jQuery were functioning at all.

Commenting out the "jQuery.noConflict()" line seems to have solved the problem. The slideshow works, all the other jQuery items on my page work. Has anyone else experienced this problem? What is up?? Thanks.

Edit: Second issue resolved. I had to change the banner background to an x-repeatable image, then made the whole banner about 800px and wrapped the slideshow in a second div using the background image alone. Thanks, guys.

I'm using this script to display a site banner. Originally, the banner image was displayed statically as the background of an empty <div> : This allowed me to set the width of the div to 100% and center the image, effectively creating a banner that is centered and has a dynamic width identical to the width of the browser window.

Now that I'm using the slideshow, the banner is left-aligned and quite a bit larger than most browser windows (the images are about 1400px). This means that the banner is no longer centered and also forces a horizontal scrollbar, which I really don't want.

I was wondering if anyone had some great idea about how to solve that one... I'm kind of at a loss.

Thanks a bunch, guys!

**ddadmin** · 09-14-2009, 10:00 PM

For the first issue, what other jQuery script is on your page that ceases to work with jQuery.noconflict()? This can happen depending on how the other script accesses the $() function of jQuery, though the issue is something that should be corrected in the script itself, and isn't a problem with noconflict() per say.

For the second issue, I'm not sure I understand entirely your set up. In general though, the script does center the image within the slide if the slideshow's overall dimensions exceed that of the shown image.

**traq** · 09-15-2009, 05:23 AM

The page also uses DDsmoothmenu and a little fade-in-on-mouseover script. All three scripts worked separately, but together were not working at all - like they weren't even installed. I was systematically removing stuff to see what went wrong, and the slideshow seemed to be the key. With jQuery.noConflict() commented out, everything seems to work again.

As for the second issue, don't worry, I've figured it out. It wasn't a problem with the script anyway, just an issue of creative implementation!
But in case you were interested:

Originally:
I had a banner for my page, about 1500px wide (so it would cover most screen widths). The banner was basically a wide background with the featured graphic in about 500px in the center.

In order to keep the banner centered regardless of browser width, I had it set as the background image in a 100% width div:

Code:

#banner{
width: 100%;
height: 250px;
margin: 0 auto;
background: url('image,jpg') no-repeat center center;
...
}

When I changed the static banner image into a slideshow, the images were left-justified (because they were wider than the browser width) and forced the page past 100% width, resulting in horizontal scrollbars.

My solution was to change the the background of the banner to something x-tileable and make the featured part of the graphic separate, only about 750px wide. This way, I could put them in the slideshow and center it above a static background. Kinda hard to explain succinctly, but you can see it here.

Code:

#banner{  //this div wraps around #bannerslides
height: 250px;
width: 100%;
margin-top: 110px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: url('bannerX.jpg') repeat-x center center;  //this is the repeatable BG image
}
#bannerslides{  //slideshow loads in this div
// images are 750px x 250px and blend into background of #banner div above
margin: 0 auto;
text-align: center;
}

**ddadmin** · 09-16-2009, 09:09 AM

As far as DD Smooth Menu, putting it on the same page as Fade In Slideshow works for me. Since both scripts reference the jQuery library, the former an older 1.2.6 version, did you remember to remove that from the page when both scripts are present:

Code:

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

A sample page with both running would be:

Code:

<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: [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:'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>


<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (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 full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<body>

<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>


<h2>Example 1</h2>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>


<h2 style="margin-top:200px">Example 2</h2>

<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

**traq** · 09-16-2009, 03:55 PM

Yes, I only link to jQuery 1.3.2.

I have found it works with jQuery.noConflict() without the fade-in script. Can you see any possible cause/workaround (I'm don't have much experience with jQuery)?

Code:

$(document).ready(function(){
  $(".fade").fadeTo("fast", 0.7);
  $(".fade").hover(function(){
    $(this).fadeTo("fast", 1);
  });
  $(".fade").mouseleave(function(){
    $(this).fadeTo("fast", 0.7);
  });
});

Also, how much of an issue do you think this might be? It seemed to be working fine, so is there any downside to not using noConflict()?
thanks!

**ddadmin** · 09-16-2009, 09:03 PM

Hmm the two scripts running on the same page and with noconflict() enabled works for me as mentioned actually. Have you tried removing any other script other than these two to narrow down the issue?

Also, how much of an issue do you think this might be? It seemed to be working fine, so is there any downside to not using noConflict()?

noconflict() is only useful when your page contains scripts that use other libraries such as Prototype that also make use of "$" as a function. If your page doesn't utilize these scripts, then it's not an issue.

**traq** · 09-17-2009, 07:51 PM

Originally Posted by ddadmin

Hmm the two scripts running on the same page and with noconflict() enabled works for me as mentioned actually. Have you tried removing any other script other than these two to narrow down the issue?

Do you mean the slideshow and the fade-in? Or the sildeshow and the smoothmenu? I have tried all script combinations now, and it is the fade-in script that conflicts. it runs with the smoothmenu, but not the slideshow (with noConflict() enabled).

Originally Posted by ddadmin

noconflict() is only useful when your page contains scripts that use other libraries such as Prototype that also make use of "$" as a function. If your page doesn't utilize these scripts, then it's not an issue.

The page in question does not, but I do use several prototype scripts regularly in various projects. Is there something about the syntax that noConflict() picks up? Do you know of a way to avoid the unintended conflict?

Thanks much!

**ddadmin** · 09-18-2009, 05:20 AM

Do you mean the slideshow and the fade-in? Or the sildeshow and the smoothmenu? I have tried all script combinations now, and it is the fade-in script that conflicts. it runs with the smoothmenu, but not the slideshow (with noConflict() enabled).

Well the fade in is the slideshow, or Fade In Slideshow (heh). So in other words, I'm referring to the Fade In Slideshow and Smooth Menu running on the same page, with noconflict() kept in, which works for me.If you save the above sample page I posted inside the code box below, it should run for you as well...

**traq** · 09-18-2009, 09:44 PM

I'm sorry; by "fade-in" I meant the mouseover script I mentioned above (this one:

Code:

$(document).ready(function(){
  $(".fade").fadeTo("fast", 0.7);
  $(".fade").hover(function(){
    $(this).fadeTo("fast", 1);
  });
  $(".fade").mouseleave(function(){
    $(this).fadeTo("fast", 0.7);
  });
});

), not the slideshow. I'm really sorry for the mixup. It never crossed my mind that it would be confusing to refer to it that way.

To clarify, yes, the two DD scripts (fade-in slideshow & smoothmenu) work fine together.

It is something in the mouseover fade-in-&-out script that conflicts with noConflict(). I know it's not a DD script, but if you (or anyone else!) happens to see the cause of the conflict, I was hoping to figure out a solution.

Again, thanks for all the help so far!

Thread: Fade-in Slideshow: dynamic sizing/centering && jQuery.noConflict() conflict

Thread Tools

Search Thread

Fade-in Slideshow: dynamic sizing/centering && jQuery.noConflict() conflict

The Following User Says Thank You to ddadmin For This Useful Post:

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions