Ultimate Fade-in slideshow & Picasa?

[srlagarto]

Ultimate Fade-in slideshow (v2.4)
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Hi, there. I've installed this script to great effect on my site, jah-shaka.eu - I'm very pleased with the way it works. However, I've noticed that, since installing it, the Picasa PWI on my Gallery page has stopped working - I've tried tweaking the code for each, just to find that only one or the other will work... not both at the same time!

Can anyone offer some insight into what I'm doing wrong here?

[jscheuer1]

Looks like it's working here to me. Did you 'fix' it?

What I see is that since the Fade In script puts jQuery into no conflict mode, you have had to install two copies of jQuery to the page. Even though they are both the same version, one is hosted on the server, the other is hosted on Google API's. So the visitor must download the script twice, even though it's presumably identical. This is acceptable, but not ideal.

However, the PWI script is written to accept no conflict mode, only the on page initialization is not. Also, since the page works with the second copy of jQuery there, no conflict is not required.

You have three other choices, other than what you have done, which as I say is acceptable, though not ideal. Two of these choices allow you to remove the second copy of jQuery from the page. Once you do that, you have to either:

• Comment out the no conflict line in the fadeslideshow.js script (insert the red comment tokens as shown):
  
  

  /* Ultimate Fade-in slideshow (v2.4)
  * Last updated: May 24th, 2010. This notice must stay intact for usage 
  * Author: Dynamic Drive at http://www.dynamicdrive.com/
  * Visit http://www.dynamicdrive.com/ for full source code
  */
  
  //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
  //May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
  
  var fadeSlideShow_descpanel={
  	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
  	fontStyle: 'normal 11px Verdana', //font style for text descriptions
  	slidespeed: 200 //speed of description panel animation (in millisec)
  }
  
  //No need to edit beyond here...
  
  //jQuery.noConflict()
  
  function fadeSlideShow(s . . .

  This results in the page no longer being in jQuery no conflict mode.

Or:

• Change the PWI initialization on the page:
  
  

      <script type="text/javascript">
          $(document).ready(function() {
              $("#container").pwi({
                  username: 'jahshakasurfshop'
              });
          });
      </script>

  To no conflict compatibility:
  
  

      <script type="text/javascript">
          jQuery(document).ready(function($) {
              $("#container").pwi({
                  username: 'jahshakasurfshop'
              });
          });
      </script>

  This results in the page remaining in jQuery no conflict mode.

The third option would simply be to make both calls to jQuery to the same location. That way it would only need to be downloaded once by the user. And would result in the page having a mixture of conflict and no conflict modes.

There's at least one other viable approach (placing PWI and its init before Fade In but after jQuery, and removing the second copy of jQuery), but I won't go into detail on that right now. And the first two or all three methods could be combined. In fact though, since the page works fine in jQuery without no conflict mode, perhaps the first choice would be best.

The only reason to use jQuery no conflict mode is if you need multiple versions of jQuery on a page, or if you need to also use another script library - say like Prototype, which also uses the $ variable as its main function.

[srlagarto]

John,

Thanks for the quick response... indeed, I 'fixed' it. I found that putting two copies of the jQuery file (one local, one remote) solved it... but I agree - it's not the most ideal solution! I'm pretty green when it comes to this kind of coding, so I'll give your response the consideration it deserves and look into it properly, then tweak the necessary code accordingly.

Thanks again!