Tweet
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
THANK YOU IN ADVANCE!!
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&source=s_q&hl=en&geocode=&q=600+Illinois+Street,+San+Francisco,+CA&sll=37.76416,-122.388142&sspn=0.011382,0.020642&ie=UTF8&hq=&hnear=600+Illinois+St,+San+Francisco,+California+94107&ll=37.76416,-122.388142&spn=0.01145,0.020642&z=14&output=embed" target="_blank"></iframe>
<div id ="spacer">MAP OF GLUTEN FREE REVIEWER GROCERY</div>
</div>
</div>
</body>
</html>
Comment