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 5 of 5
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Unhappy jquery image slider help please

    hi all

    i have found a nice tutorial on the web for an image slider found here
    http://nivo.dev7studios.com/

    but when trying to implement it all i get is my images listed one under another and no slider??? obviously doing something wrong. all the files are in the correct folders etc

    here is the link to my page
    http://www.kernow-connect.com/slider/slidertest.php

    and my page code
    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=utf-8" />
    <title>Slider Test!!</title>
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="slider">
    	<img src="images/slide1.jpeg" alt="" />
    	<a href="http://dev7studios.com"><img src="images/slide2.jpeg" alt="" title="#htmlcaption" /></a>
    	<img src="images/slide3.jpeg" alt="" title="This is an example of a caption" />
    	<img src="images/slide4.jpeg" alt="" />
    </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>
    <script type="text/javascript">
    $(window).load(function() {
    	$('#slider').nivoSlider({
    		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    		slices:15,
    		animSpeed:500, //Slide transition speed
    		pauseTime:4000,
    		startSlide:0, //Set starting Slide (0 index)
    		directionNav:true, //Next & Prev
    		directionNavHide:true, //Only show on hover
    		controlNav:true, //1,2,3...
    		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
    		beforeChange: function(){},
    		afterChange: function(){},
    		slideshowEnd: function(){} //Triggers after all slides have been shown
    	});
    });
    </script>
    </body>
    </html>
    can anyone please help me get it working?
    many thanks
    Luke

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Your link:

    Code:
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    doesn't link to a js file for me.

  • Users who have thanked SB65 for this post:

    LJackson (09-10-2010)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    your right, the tutorial code is incorrect! the filename to that file was wrong
    thanks mate, appreciate your help

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    one other thing mate if you dont mind, how do i get the "navigation" images to appear, do i need to have the images or are they being called in from else where?

    the circles at the bottom and the next and previous images...

    EDIT
    ====

    ok i have now got the images working but i cant seem to get rid of the numbers which are sat over the images???
    i think they are set in this code?
    Code:
    			//Add Control nav
    			if(settings.controlNav){
    				var nivoControl = $('<div class="nivo-controlNav"></div>');
    				slider.append(nivoControl);
    				for(var i = 0; i < kids.length; i++){
    					if(settings.controlNavThumbs){
    						var child = kids.eq(i);
    						if(!child.is('img')){
    							child = child.find('img:first');
    						}
                            if (settings.controlNavThumbsFromRel) {
                                nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
                            } else {
                                nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
                            }
    					} else {
    						nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
    					}
    					
    				}
    any ideas please

    many thanks
    Luke
    Last edited by LJackson; 09-10-2010 at 05:51 PM.

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    anyone know how to get rid of the numbers? still cant figure it out?

    thanks


  •  

    Posting Permissions

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