Web Analytics Made Easy -
StatCounter SqueezeBox & Galleria Flickr JQuery Conflict/Issue... Pls Help :) - CodingForum

Announcement

Collapse
No announcement yet.

SqueezeBox & Galleria Flickr JQuery Conflict/Issue... Pls Help :)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • SqueezeBox & Galleria Flickr JQuery Conflict/Issue... Pls Help :)

    Hello Everyone,

    I seem to run into the same type of issues throughout my attempts to code in JavaScript using multiple scripts in one page.

    I am attempting to load both a SqueezeBox and Galleria(flickr) script in the same page. I am not sure how to correctly code the page so that it will use just one instance of JQuery. What I mean is:
    1. SqueezeBox wants to use jquery-min
    2. Galleria wants to use jquery.js

    However, when I place both of them in the file, the SqueezeBox function ceases to work. I know that I am basically calling the same library twice and it is redundant, but I can't seem to get both scripts to work while calling only one of the versions of jquery.

    Could someone please instruct me on how I can integrate both of these functions in the same page? Is there something I would need to do to the jquery files or the way I am calling their functions which will allow me to consolidate down to just one version of JQuery?

    The SqueezeBox function can be found applied to the Facebook/Twitter/Email buttons at the top-right of the page.

    Below is my code and here is my current file: http://www.gfrgrocery.com/index2.html and here is one where the SqueezeBox function actually works: http://www.gfrgrocery.com

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
    <meta name="description" content="We offer nutritional support in the form of edible accessible and reasonably priced nutrition for all our friends and families who are gluten free">
    <meta name="keywords" content="wheat, gluten free, intolerant, allergy, celiac, groceries, san francisco, reviews">
    <meta name="author" content="Gluten Free Reviewer Grocery">
    <title>Groceries, Reviews, and Events in San Francisco | Gluten Free Reviewer Grocery</title>
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    
    <!-- dynamic assets --> 
    	<link rel="stylesheet" type="text/css" href="css/SqueezeBox.css" /> 
    	<script type="text/javascript" src="js/mootools-1.2-core-nc.js"></script> 
    	<script type="text/javascript" src="js/SqueezeBox.js"></script> 
    	<script type="text/javascript"> 
    		/* <![CDATA[ */
     
    window.addEvent('domready', function() {
    
    
    
    	/**
    
    	 * That CSS selector will find all <a> elements with the
    
    	 * class boxed
    
    	 *
    
    	 * The example loads the options from the rel attribute
    
    	 */
    
    	SqueezeBox.assign($$('a.boxed'), {
    
    		parse: 'rel'
    
    	});
    
    
    
    });
    		/* ]]> */
    	</script> 
    
    
    
    <style type="text/css"> html, body { background:url(images/bg.jpg); width: 1000px; margin-right: auto; margin-left: auto; margin-top:0px; padding: 0px; border: 0px; } 
    
    	#container { height: auto; width: 1000px; margin: 0 0 0 0px; /* top right bottom left */ padding: 0; background:url(images/bg.jpg); } 
    
    	#container #col1 { background:url(images/bg.jpg); height: auto; width: 700px; float: left; } 
    
    	#container #col2 { background:url(images/bg.jpg); margin-top: 10px; height: auto; width: 300px; float: right; } 
    
    	#container #cesc {background:url(images/bg.jpg); width:700px; height: 500px; margin-top: 1px; margin-right: auto; margin-left: auto;  }
    
    /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:467px;}
    
    
    	#header_division { 
    		background-image: 
    		url('images/vline.png'); 
    		background-repeat: repeat-y; 
    		position: absolute;
    		margin-top: 15px;
    		margin-left: 935px;
    		width: 5px;
    		height: 185px;
    		float: right
    		}
    
    	#facebook {  
    		position: absolute;
    		margin-top: 102px;
    		margin-left: 955px;
    		float: right
    		}	
    		
    	#twitter {  
    		position: absolute;
    		margin-top: 134px;
    		margin-left: 955px;
    		float: right
    		}	
    		
    	#contact-form {  
    		position: absolute;
    		margin-top: 168px;
    		margin-left: 955px;
    		float: right
    		}
    
    	#spacer { background: #000; width: auto; height: 33.5px; 
    		text-align: center;
    		color: #ffcc00;
    		}
    
    	#slider {
    		text-align: center;
    		margin-left: 0px;
    		margin-right: auto;
    		margin-top: 10px;
    		}
    
    </style> 
    
    
    <style type="text/css" media="screen">
    
    	/**************** menu coding *****************/
    	#menu {
    	width: 1000px;
    	background: #CCC;
    	margin: auto;
    	}
    
    	#menu ul {
    	list-style: none;
    	margin: auto;
    	padding: 0;
    	width: 200px;
    	float: left;
    	}
    
    	#menu a, #menu h2 {
    	font: 12px/16px arial, helvetica, sans-serif;
    	text-transform: uppercase;
    	display: block;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #111 #888 #555 #bbb;
    	margin: 0;
    	padding: 2px 3px;
    	}
    
    	#menu h2 {
    	color: #000;
    	background: #ccc;
    	text-transform: uppercase;
    	}
    
    	#menu a {
    	color: #FFF;
    	background: #631598;
    	text-decoration: none;
    	}
    
    	#menu a:hover {
    	color: #000;
    	background: #ff7102;
    	}
    
    	#menu li {position: relative;}
    
    	#menu ul ul {
    	position: absolute;
    	z-index: 500;
    	}
    
    	#menu ul ul ul {
    	position: absolute;
    	top: 0;
    	left: 100%;
    	}
    
    	div#menu ul ul,
    	div#menu ul li:hover ul ul,
    	div#menu ul ul li:hover ul ul
    	{display: none;}
    
    	div#menu ul li:hover ul,
    	div#menu ul ul li:hover ul,
    	div#menu ul ul ul li:hover ul
    	{display: block;}
    
    	#notice {
    		font: 10px arial;
    	}
    
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    }
    
    #menu ul li a {height: 1%;} 
    
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    }
    </style>
    <![endif]-->
    
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-19465632-3']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="js/galleria/galleria-1.2.5.min.js"></script>
    <script src="js/galleria/plugins//flickr/galleria.flickr.min.js"></script>
    
    
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    
    
    <script type="text/javascript" src="js/noconflict.js"></script> 
    
    
    </head>
    
    
    
    <body>
    
    <div id="header_division"></div>
    
    <div id="facebook">
    	<a href="facebook.html" class="boxed" rel="{handler:'iframe',size:{x:230,y:475}}"> <img src="images/facebook.png" alt="Follow Gluten Free Reviewer Grocery On Facebook"></a>
    </div>
    
    <div id="twitter">
    	<a href="twitter.html" class="boxed" rel="{handler:'iframe',size:{x:245,y:500}}"><img src="images/twitter.png"alt="Follow Gluten Free Reviewer Grocery On Twitter"></a>	
    </div>
    
    
    <div id="contact-form">
    	<a href="@Tests/PHPContact/contact.php" class="boxed" rel="{handler:'iframe',size:{x:490,y:500}}"><img src="images/email.png" alt="Contact Gluten Free Reviewer Grocery Via Email"></a>
    
    </div>
    
    <img src="images/TopHeader.JPG" width="1000" height="207" alt="Food and Grocery, Reviews, Allergy Information, and More at Gluten Free Reviewer Grocery Store" />
    
    
      <!-- start menu HTML -->
    
    <!-- BEGIN NAVIGATION MENU -->
    
    <div id="menu">
    	<ul>
    	  <li><a href="index.html">Home</a>
    	  </li>
    	</ul>
    	
    	<ul>
    	  <li><a href="about-AU.html">About Us</a>
    		<ul>
    		  <li><a href="about-WIG.html" title="Gluten / Celiac Disease">Gluten / Celiac Disease</a></li>
    		  <li><a href="about-AU.html" title="About Us">About Us</a></li>
    		  <li><a href="about-AOR.html" title="About Our Reviews">About Our Reviews</a></li>
    		  <li><a href="about-CI.html" title="Contact Information">Contact Info & Directions</a></li>
    		</ul>
    	  </li>
    	</ul>
    
    	<ul>
    	  <li><a href="newglutenfreeproducts.html">New Products</a>
    	  </li>
    	</ul>
    
    	<ul>
    	  <li><a href="community-EAG.html">Community</a>
    
    		<ul>
    		
    		  <li><a href="community-EAG.html" title="Events @ Gluten Free Reviewer Grocery">Events @ GFRG</a></li>
    		  
    		  
    
    		</ul>
    	  </li>
    	</ul>	
    
    	  
    	<ul>
    	  <li><a href="blog.php" title="Gluten Free Reviewer Blog">Gluten Free Reviewer Blog</a>
    		<ul>
    		  <li><a href="blog-interesting.php" title="Interesting Articles">Interesting Articles</a></li>
    		  <li><a href="blog-snacks.php" title="Snacks">Snacks</a></li>
    		  <li><a href="blog-sauces.php" title="Sauces">Sauces</a></li>
    		  <li><a href="blog-pastas.php" title="Pastas">Pastas</a></li>
    		  <li><a href="blog-meals.php" title="Meals">Meals</a></li>
    		  <li><a href="blog-cookies.php" title="Cookies">Cookies</a></li>
    		  <li><a href="blog-asiannoodles.php" title="Asian Noodles">Asian Noodles</a></li>
    		</ul>
    	  </li>
    	</ul>
    
    			
    </div>
    
    <!-- END NAVIGATION MENU -->
    
    
    
    
    
    
    
    
    
    <!-- BEGIN PAGE SPECIFIC CONTENT -->
    
    <div id="container">
    
    	<div id="col1">
            
    		<div id="slider" class="nivoSlider">
    			<div class="container" id="cesc">
    
    				<!-- container space for slide-show -->
    				<div id="galleria"></div> 
    				
    				<!-- GALLERIA SLIDESHOW SCRIPT & SETTINGS BELOW
    				The "set" number corresponds to the flickr set number which can be found in the URL. Example: http://www.flickr.com/photos/gfrgrocerysf/sets/72157627371126327/ 
    				The number next to "autoplay" sets the time interval... higher the number, the longer the interval
    				For more settings, visit: http://galleria.aino.se/docs/1.2/plugins/flickr/
    				-->
    				
    				<script>
    				    Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
    				
    				    $('#galleria').galleria({
    					flickr: 'set:72157627425570483',
    					autoplay: 5000,
    					transition: 'fade',
    					transitionSpeed: '1000',
    					flickrOptions: {
    					    
    					}
    				    });
    				
    				</script>
    
    			</div>		
    		</div>
         
    		<div id="notice" align="left">
    		Copyright © 2011 Gluten Free Reviewer Grocery 
    		</div>   
            
    	</div>
            
            
          
    	<div id="col2">
    
            <img src="images/store/store8.jpg" width="300" height="200"/ alt="Gluten Free Reviewer Grocery Image">
    	
    		<div id ="spacer"><h3>PHOTO OF OUR STORE</h3></div>
            
            <iframe style="position:relative; left:0px; top:0px; z-index:1" width="300" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=600+Illinois+Street,+San+Francisco,+CA&amp;sll=37.76416,-122.388142&amp;sspn=0.011382,0.020642&amp;ie=UTF8&amp;hq=&amp;hnear=600+Illinois+St,+San+Francisco,+California+94107&amp;ll=37.76416,-122.388142&amp;spn=0.01145,0.020642&amp;z=14&amp;output=embed" target="_blank"></iframe>
            
    		<div id ="spacer">MAP OF GLUTEN FREE REVIEWER GROCERY</div>
    
    	</div>
            
            
                  
    </div>
          
    
    
    
    	
    </body>
    </html>
    THANK YOU IN ADVANCE!!

  • #2
    Does anyone have any ideas on this? Thanks in advance!!

    Comment


    • #3
      You are loading MooTools as well. MooTools and jQuery are different/ competing js libraries. Trying to use both at the same time is most likely to cause conflicts, and loading a 'noconflict.js' is unlikely to resolve these conflicts on its own, without adding further code.

      I may be wrong but it appears that you are also loading the jQuery library in relation to the google-apis.

      Do you need MooTools? If not, remove it.
      Otherwise, try and find a jQuery version of the feature that currently requires MooTools, so that you could remove this library.

      Check the features that you want to use and determine which ONE jQuery library will satisfy them all. That is, which version number will work with them all.
      If you find this tricky you could install the most recent versions of each feature and then install the most recent version of the jQuery library. This usually works and means that you don't have to juggle the different version numbers.

      The order of installation is important:
      Install the .css files firstly;
      install (one) jQuery library;
      then install the particular features (Squeezebox.js, etc..).
      "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
      Validate your HTML and CSS

      Comment

      Working...
      X