Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Another Nivo Slider Issue - Slider Not Loading

    Hello all,

    Again it's time for another slider issue from me. I am more concerned with the HTML rather than the CSS. Here is the website with the two images one above the other (slider is not loading):

    http://ldthf.lounh.servertrust.com/

    I fear it has something to do with this tidbit:

    Code:
    	<script type= "text/javascript">
    	
    $(window).load(function(){
        $('#slider').nivoSlider(){
    </script>

    But I am not sure at all and completely lost. Please help! All images, css, .js files are loaded on the website.

    HTML:

    Code:
    <html>
    <head>
    
    	<link rel="stylesheet" href="/v/vspfiles/assets/images/style.css">
    	<script type= "text/javascript" src="/v/vspfiles/assets/images/jquery.nivo.slider.js"></script>
    	<script type= "text/javascript" src="/v/vspfiles/assets/images/jquery-1.6.4.js"></script>
    	<script type= "text/javascript">
    	
    $(window).load(function(){
        $('#slider').nivoSlider({
            effect: 'fold', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 10, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 400, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: true, // Next & Prev navigation
            directionNavHide: true, // Only show on hover
            controlNav: true, // 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: true, // 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>
    
    </head>
    
    <body>
    	<div id="wrapper"
    		<div id="slider_wrapper">
    			<div id="slider">
    				<img src="/v/vspfiles/assets/images/banner1.gif" title="Welcome To Our New Website!">
    				<img src="/v/vspfiles/assets/images/banner2.gif" title="#htmlcaption">
    			</div>
    			
    			<div id="htmlcaption" class="nivo-html-caption">
    				<strong>image</strong> <a href="#">tag</a>
    				</div>
    		</div>
    	</div>
    </body>
    </html>
    CSS:

    Code:
    #slider_wrapper {
    	height: 246px;
    }
    
    #slider {
    	position: relative;
    	width: 618px;
    	height: 246px;
    	background: url(/v/vspfiles/assets/images/loading.gif) no-repeat 50% 50%;
    }
    
    #slider_img {
    	position: absolute;
    	top: 0;
    	left: 0;
    	display: none;	
    }
    
    #slider a{
    	border: 0;
    	display: block;
    }
    
    /* The Nivo Slider styles */
    .nivoSlider {
    	position:relative;
    }
    .nivoSlider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:100%;
    	height:100%;
    	border:0;
    	padding:0;
    	margin:0;
    	z-index:6;
    	display:none;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    	display:block;
    	position:absolute;
    	z-index:5;
    	height:100%;
    }
    .nivo-box {
    	display:block;
    	position:absolute;
    	z-index:5;
    }
    /* Caption styles */
    .nivo-caption {
    	position:absolute;
    	left:0px;
    	bottom:0px;
    	background:#000;
    	color:#fff;
    	opacity:0.8; /* Overridden by captionOpacity setting */
    	width:100%;
    	z-index:8;
    	font-family: arial, helvetica, sans-serif;
    	text-transform: uppercase;
    }
    .nivo-caption p {
    	padding:5px;
    	margin:0;
    }
    .nivo-caption a {
    	display:inline !important;
    	color: #ff0000;
    	text-decoration: none;
    }
    .nivo-caption a:hover {
    color: #0066CC;
    text-decoration: underline;
    
    }
    .nivo-html-caption {
        display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    	position:absolute;
    	top:40%;
    	z-index:9;
    	cursor:pointer;
    	background: url(/v/vspfiles/assets/images/arrows.png) no-repeat;
    	text-indent: -9999px;
    	width: 45px;
    	height: 50px;
    	display: block;
    	}
    a.nivo-prevNav {
    	left:15px;
    }
    
    a.nivo-nextNav {
    	right:15px;
    	background-position: -45px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav {
    	margin-left: 450px;
    }
    .nivo-controlNav a {
    	position:relative;
    	z-index:9;
    	cursor:pointer;
    	float: left;
    	background: url(/v/vspfiles/assets/images/bullets.png) no-repeat;
    	width: 22px;
    	height: 22px;
    	text-indent: -9999px;
    	margin-top: 260px;
    
    }
    .nivo-controlNav a.active {
    	background-position: 0 -22px;
    }
    My K24A2 Civic Build Thread: http://www.k20a.org/forum/showthread.php?t=15573
    My 2JZGE-T Supra Build Thread: http://forum.clubna-t.com/showthread.php?t=6895
    1995 Toyota Supra - Hardtop: Complete Rebuild Thread Coming Soon...

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    In Firebug's console window the displayed error is :

    Code:
    $("#slider").nivoSlider is not a function
    This suggests that either you haven't loaded the nivoSlider code or that there's some other problem with jQuery. Looking at your code you have jQuery loaded twice - here at line 23

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    and again at line 296

    Code:
    	<script type= "text/javascript" src="/v/vspfiles/assets/images/jquery-1.6.4.js"></script>
    This is quite likely to cause problems. I'd suggest replacing line 23 with line 296 - so you're just loading jQuery 1.6.4 once at the start of the document.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm, I have no idea where you found that and how to change it...

    The code you 1st mention is straight off this website and it's to get it to load:

    http://nivo.dev7studios.com/support/...-plugin-usage/
    My K24A2 Civic Build Thread: http://www.k20a.org/forum/showthread.php?t=15573
    My 2JZGE-T Supra Build Thread: http://forum.clubna-t.com/showthread.php?t=6895
    1995 Toyota Supra - Hardtop: Complete Rebuild Thread Coming Soon...

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I just looked at the source code of your page.

    It looks like you're using a jSlider plugin as well as nivoSlider, both of which require jQuery. So if you follow the instructions for each both will tell you to load jQuery - but if you load it twice it often causes issues.

    Assuming you can edit the code on your page, replace this:

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    with this:

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    This will load jQuery 1.6.4. Then find this line:

    Code:
    <script type= "text/javascript" src="/v/vspfiles/assets/images/jquery-1.6.4.js"></script>
    and delete it.


  •  

    LinkBacks (?)

    1. 02-23-2014, 06:43 PM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •