Nivo-Slider vs. SimpleModal... Conflict? Or Loading Issue?

rsantamarina · 06-04-2011, 03:39 AM

Hello Everyone,

I am attempting to integrate both Nivo-Slider (http://nivo.dev7studios.com/) and SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) scripts in my page and for some reason I am unable to get them to work together...

The SimpleModal code works fine on its own when uploaded to my webserver, but as soon as I try to integrate it into my code containing NivoSlider, it does not work.

My expertise is somewhat limited, but there must be something that I am missing which properly calls the functions. I would greatly appreciate any assistance!!

Here is my current (stuck) progress: http://santamarinas.com/RS/Tests/GFRG/index3.html

Below is my code (please forgive the somewhat chaotic state as I have been experimenting with various items):

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>
<title>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" />

<!-- Contact Form CSS files -->
<link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />




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



#container2 { height: auto; width: 1000px; margin: 0 0 0 0px; /* top right bottom left */ padding: 0; background-color: #111; } 


#container2 #col1 { background: #ffcc00; height: auto; width: 700px; float: left; } 

#container2 #col2 { background: #ffcc00; margin-top: 10px; height: auto; width: 300px; 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">

body {
	text-align: center;
	margin: auto;
	background-color: #FFF;
}





#sliderSide {
	position: relative;
	text-align: center;
	margin-left: 695px;
	margin-top: -482px;
}


#sliderSide2 {
	position: relative;
	text-align: center;
	margin-left: 698px;
	margin-top: -701px;
}


#sliderSide3 {
	position: relative;
	text-align: center;
	margin-left: 0px;
	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: 250px;
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]-->
</head>



<body>


<img src="images/TopHeader.JPG" width="1000" height="207" alt="GFR" />


  <!-- start menu HTML -->



<!-- BEGIN NAVIGATION MENU -->

<div id="menu">
  <ul>
  <li><a href="index.html">Home</a>
  </li>
</ul>

<ul>

  <li><a href="about.html">About Us</a>
    <ul>
      <li><a href="about/about-WIG.html" title="What Is Gluten?">What Is Gluten?</a></li>
      <li><a href="about/about-AU.html" title="About Us">About Us</a></li>
      <li><a href="about/about-AOR.html" title="About Our Reviews">About Our Reviews</a></li>
      <li><a href="about/about-CI.html" title="Contact Information">Contact Information</a></li>
      
<!--
      <li><a href="vs7.html" title="Complete Example">Further SubMenus</a>
        <ul>
          <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
            <ul>

              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
            </ul>

          </li>
        </ul>
      </li>
-->

    </ul>
  </li>
</ul>


<ul>
  <li><a href="community.html">Community</a>

    <ul>
    
      <li><a href="community/community-EAG.html" title="Events @ Gluten Free Reviewer Grocery">Events @ GFRG</a></li>
      <li><a href="community/community-LE.html" title="Local Events">Local Events</a></li>
      <li><a href="community/community-JU.html" title="Join Us">Join Us</a></li>

    </ul>
  </li>
</ul>	

  
    
<ul>
  <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="Our Blog">Blog</a></li>
</ul>
    
    
  
    				
</div>

<!--
<div>
<iframe allowtransparency="true" frameborder="0" scrolling="yes" src="http://www.glutenfreereviewer.com/" style="border: medium none; overflow: shown; width: 1000px; height: 1000px;"></iframe>
</div>
-->

<!-- END NAVIGATION MENU -->






<div id="container2">

	<div id="col1">
        
            <div id="slider" class="nivoSlider">
                <img src="images/060311-1.JPG" alt="" title="DOT: Gluten Free Ingredients: ___________ 06/02/11... for more information, tweet us..." />
                
                <img src="images/060311-2.JPG" alt="" title="This is an example of a caption 2" />
                <img src="images/060311-3.JPG" alt="" title="#htmlcaption" />
                <img src="images/060311-4.JPG" alt="" title="#htmlcaption" />
                <img src="images/060311-5.JPG" alt="" title="#htmlcaption" />
              
                
                
     		</div>
     
        <div id="htmlcaption" class="nivo-html-caption">
             <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
 
           
        <div id="notice" align="left">
        Copyright © 2011 Gluten Free Reviewer Grocery 
		
		
		
<div id='container'>
	<div id='logo'>
		<h1>Simple<span>Modal</span></h1>
		<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
	</div>
	<div id='content'>
		<div id='contact-form'>
			<h3>Contact Form</h3>
			<p>A contact form built on SimpleModal. Demonstrates the use of the <code>onOpen</code>, <code>onShow</code> and <code>onClose</code> callbacks, as well as the use of Ajax with SimpleModal.</p>
			<p>To use: open <code>data/contact.php</code> and modify the <code>$to</code> and <code>$subject</code> values. To enable/disable information about the user, configure the <code>$extra</code> array.</p>
			<p><strong>Note:</strong> This demo must be run from a web server with PHP enabled.</p>
			<input type='button' name='contact' value='Demo' class='contact demo'/> or <a href='#' class='contact'>Demo</a>
		</div>
		<!-- preload the images -->
		<div style='display:none'>
			<img src='img/contact/loading.gif' alt='' />
		</div>
	</div>

</div>
		
		
        </div>   
        
   </div>
        
        
      
	<div id="col2">

        <img src="images/store/store8.jpg" width="300" height="200"/>
	
		<div id ="spacer"><h3>CLICK HERE FOR A TOUR 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 STORE</div>

	</div>
        
        
              
</div>
      
        
<!-- Slider JS -->    
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>


<!-- SmipleModal CONTACT SCRIPT -->
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/contact.js'></script>    


<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // Slide transition speed
        pauseTime:2500, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:false, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:false, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
	

});
</script>




</body>
</html>

Thank you in advance for your help!!

rsantamarina · 06-04-2011, 03:52 AM

hmm... an observation:

When I remove the jquery min script and put in the full jquery.js, the SimpleModal contact form works (but the nivo slider does NOT)...

I thought that jquery and jquery min were the exact same thing just one was compressed.

Here is the file with jquery instead of the min version: http://santamarinas.com/RS/Tests/GFRG/index3-1.html

Nitronium · 07-20-2011, 06:43 PM

I have also noticed this issue. I have a css drop down menu that works fine in IE6 when using the non-minified version, but using the minified version of jquery, it stops working.

Actually, I was wrong, both versions break my css menu. However, if I place <script src="/libs/jquery.js" ></script> ABOVE the css rather than below it, everything works fine.

Oddness