PDA

View Full Version : featuredimagezoomer works great by itself but prevents other js on page to run



Rinck
10-16-2012, 01:00 AM
1) Script Title: dynamicdriveforumquestion.html

2) Script URL (on DD): rinckheule.com/dynamicdriveforumquestion.html

3) Describe problem:
Hi I am not a developer, just use interesting code from your site and others. The 'featuredimagezoomer' worked great when I followed the instructions (awesome effect!!) but I also have two other scripts on this page. The scripts are conflicting. Either this one works and not the others or the other way around. I tried 2 things: upgraded my version of jQuery - no difference. I searched online a bit and added a <body onload = "";""> but I probably did not do it correctly. I would love to use this script and some insight would be greatly appreciated. Thank you!! RinckH:confused:

jscheuer1
10-16-2012, 04:48 AM
You should use only one version of jQuery for the page. But featuredimagezoomer.js puts jQuery into noConflict mode. Using a text only editor like NotePad, comment out that line in the script as shown:


/*Featured Image Zoomer (May 8th, 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
*/

// Feb 21st, 2011: Script updated to v1.5, which now includes new feature by jscheuer1 (http://www.dynamicdrive.com/forums/member.php?u=2033) to show optional "magnifying lens" while over thumbnail image.
// March 1st, 2011: Script updated to v1.51. Minor improvements to inner workings of script.
// July 9th, 12': Script updated to v1.5.1, which fixes mouse wheel issue with script when used with a more recent version of jQuery.

//jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
magnifycursor: 'crosshair', //Va

Save it like that and use that version.

Next put the external script tag for the one version of jQuery that you're going to use (I would suggest either the latest required by your scripts that use jQuery or just the latest version of jQuery) before all other scripts that use jQuery (edited from rinckheule.com/dynamicdriveforumquestion.html):


. . . ef="main.css" rel="stylesheet" type="text/css" />
<link href="accordionstyles.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript" src="js/featuredimagezoomer.js"></script>
<script type="text/javascript">
var FullscreenrOptions = { width: 640, height: 480, bgID: '#bgimg' };
jQuery.fn.fullscreenr(Fullscr . . .

Clear the browser cache, refresh the page, hope for the best.

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.

That's the actual page, or a full copy of it with all of the scripts, css and images it uses, not just a lifeless representation of it as I found at rinckheule.com/dynamicdriveforumquestion.html.