SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images not showing in slider

    Hi,

    Am practicing my CSS and jQuery and have done a demo site here

    The jQuery appears to be working behind the scenes, as you can see the numbers moving and the next/prev show up etc. For some reason the images won't show though.

    This the slider: nivo slider

    My html:

    Code HTML4Strict:
    <!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>artist</title>
    <link href="artstyles.css" rel="stylesheet" type="text/css" />
     
    <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.js" type="text/javascript"></script>
     
    <script type="text/javascript">
    $(window).load(function() {
    	$('#slider').nivoSlider({
    });
    });
    </script>
     
    </head>
     
    <body>
    <div id="master">
      <div id="header">
        <div id="navbar"><a href="#">home</a> <a href="#">works</a> <a href="#">custom orders</a> <a href="#">shop online</a> <a href="#"> contact</a> <a href="#">blog</a></div>
    </div>
     
    <div id="subhead">Home - Artist</div>
     
    <div id="slider">
      <img src="Art Images/pic1.jpg" width="990" height="500" alt="pic1" />
      <img src="Art Images/pic2.jpg" width="990" height="500" alt="pic2" />
      <img src="Art Images/pic3.jpg" width="990" height="500" alt="pic3" />
    </div>
     
    <div id="footer">xhtml css jQuery</div>
     
    </div>
    </body>
    </html>

    and jQuery:

    Code JavaScript:
    (function($) {
     
    	$.fn.nivoSlider = function(options) {
     
    		//Defaults are below
    		var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
     
    		return this.each(function() {
    			//Useful variables. Play carefully.
    			var vars = {
    				currentSlide: 0,
    				currentImage: '',
    				totalSlides: 0,
    				randAnim: '',
    				running: false,
    				paused: false,
    				stop:false
    			};
     
    			//Get this slider
    			var slider = $(this);
    			slider.data('nivo:vars', vars);
    			slider.css('position','relative');
    			slider.addClass('nivoSlider');
     
    			//Find our slider children
    			var kids = slider.children();
    			kids.each(function() {
    				var child = $(this);
    				var link = '';
    				if(!child.is('img')){
    					if(child.is('a')){
    						child.addClass('nivo-imageLink');
    						link = child;
    					}
    					child = child.find('img:first');
    				}
    				//Get img width & height
                    var childWidth = child.width();
                    if(childWidth == 0) childWidth = child.attr('width');
                    var childHeight = child.height();
                    if(childHeight == 0) childHeight = child.attr('height');
                    //Resize the slider
                    if(childWidth > slider.width()){
                        slider.width(childWidth);
                    }
                    if(childHeight > slider.height()){
                        slider.height(childHeight);
                    }
                    if(link != ''){
                        link.css('display','none');
                    }
                    child.css('display','none');
                    vars.totalSlides++;
    			});
     
    			//Set startSlide
    			if(settings.startSlide > 0){
    				if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
    				vars.currentSlide = settings.startSlide;
    			}
     
    			//Get initial image
    			if($(kids[vars.currentSlide]).is('img')){
    				vars.currentImage = $(kids[vars.currentSlide]);
    			} else {
    				vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
    			}
     
    			//Show initial link
    			if($(kids[vars.currentSlide]).is('a')){
    				$(kids[vars.currentSlide]).css('display','block');
    			}
     
    			//Set first background
    			slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
     
    			//Add initial slices
    			for(var i = 0; i < settings.slices; i++){
    				var sliceWidth = Math.round(slider.width()/settings.slices);
    				if(i == settings.slices-1){
    					slider.append(
    						$('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' })
    					);
    				} else {
    					slider.append(
    						$('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
    					);
    				}
    			}
     
    			//Create caption
    			slider.append(
    				$('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
    			);			
    			//Process initial  caption
    			if(vars.currentImage.attr('title') != ''){
    				$('.nivo-caption p', slider).html(vars.currentImage.attr('title'));					
    				$('.nivo-caption', slider).fadeIn(settings.animSpeed);
    			}
     
    			//In the words of Super Mario "let's a go!"
    			var timer = 0;
    			if(!settings.manualAdvance && kids.length > 1){
    				timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    			}
     
    			//Add Direction nav
    			if(settings.directionNav){
    				slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');
     
    				//Hide Direction nav
    				if(settings.directionNavHide){
    					$('.nivo-directionNav', slider).hide();
    					slider.hover(function(){
    						$('.nivo-directionNav', slider).show();
    					}, function(){
    						$('.nivo-directionNav', slider).hide();
    					});
    				}
     
    				$('a.nivo-prevNav', slider).live('click', function(){
    					if(vars.running) return false;
    					clearInterval(timer);
    					timer = '';
    					vars.currentSlide-=2;
    					nivoRun(slider, kids, settings, 'prev');
    				});
     
    				$('a.nivo-nextNav', slider).live('click', function(){
    					if(vars.running) return false;
    					clearInterval(timer);
    					timer = '';
    					nivoRun(slider, kids, settings, 'next');
    				});
    			}
     
    			//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 +'</a>');
    					}
     
    				}
    				//Set initial active link
    				$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
     
    				$('.nivo-controlNav a', slider).live('click', function(){
    					if(vars.running) return false;
    					if($(this).hasClass('active')) return false;
    					clearInterval(timer);
    					timer = '';
    					slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
    					vars.currentSlide = $(this).attr('rel') - 1;
    					nivoRun(slider, kids, settings, 'control');
    				});
    			}
     
    			//Keyboard Navigation
    			if(settings.keyboardNav){
    				$(window).keypress(function(event){
    					//Left
    					if(event.keyCode == '37'){
    						if(vars.running) return false;
    						clearInterval(timer);
    						timer = '';
    						vars.currentSlide-=2;
    						nivoRun(slider, kids, settings, 'prev');
    					}
    					//Right
    					if(event.keyCode == '39'){
    						if(vars.running) return false;
    						clearInterval(timer);
    						timer = '';
    						nivoRun(slider, kids, settings, 'next');
    					}
    				});
    			}
     
    			//For pauseOnHover setting
    			if(settings.pauseOnHover){
    				slider.hover(function(){
    					vars.paused = true;
    					clearInterval(timer);
    					timer = '';
    				}, function(){
    					vars.paused = false;
    					//Restart the timer
    					if(timer == '' && !settings.manualAdvance){
    						timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    					}
    				});
    			}
     
    			//Event when Animation finishes
    			slider.bind('nivo:animFinished', function(){ 
    				vars.running = false; 
    				//Hide child links
    				$(kids).each(function(){
    					if($(this).is('a')){
    						$(this).css('display','none');
    					}
    				});
    				//Show current link
    				if($(kids[vars.currentSlide]).is('a')){
    					$(kids[vars.currentSlide]).css('display','block');
    				}
    				//Restart the timer
    				if(timer == '' && !vars.paused && !settings.manualAdvance){
    					timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    				}
    				//Trigger the afterChange callback
    				settings.afterChange.call(this);
    			});
    		});
     
    		function nivoRun(slider, kids, settings, nudge){
    			//Get our vars
    			var vars = slider.data('nivo:vars');
    			if((!vars || vars.stop) && !nudge) return false;
     
    			//Trigger the beforeChange callback
    			settings.beforeChange.call(this);
     
    			//Set current background before change
    			if(!nudge){
    				slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
    			} else {
    				if(nudge == 'prev'){
    					slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
    				}
    				if(nudge == 'next'){
    					slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
    				}
    			}
    			vars.currentSlide++;
    			if(vars.currentSlide == vars.totalSlides){ 
    				vars.currentSlide = 0;
    				//Trigger the slideshowEnd callback
    				settings.slideshowEnd.call(this);
    			}
    			if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
    			//Set vars.currentImage
    			if($(kids[vars.currentSlide]).is('img')){
    				vars.currentImage = $(kids[vars.currentSlide]);
    			} else {
    				vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
    			}
     
    			//Set acitve links
    			if(settings.controlNav){
    				$('.nivo-controlNav a', slider).removeClass('active');
    				$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
    			}
     
    			//Process caption
    			if(vars.currentImage.attr('title') != ''){
    				if($('.nivo-caption', slider).css('display') == 'block'){
    					$('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
    						$(this).html(vars.currentImage.attr('title'));
    						$(this).fadeIn(settings.animSpeed);
    					});
    				} else {
    					$('.nivo-caption p', slider).html(vars.currentImage.attr('title'));
    				}					
    				$('.nivo-caption', slider).fadeIn(settings.animSpeed);
    			} else {
    				$('.nivo-caption', slider).fadeOut(settings.animSpeed);
    			}
     
    			//Set new slice backgrounds
    			var  i = 0;
    			$('.nivo-slice', slider).each(function(){
    				var sliceWidth = Math.round(slider.width()/settings.slices);
    				$(this).css({ height:'0px', opacity:'0', 
    					background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
    				i++;
    			});
     
    			if(settings.effect == 'random'){
    				var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");
    				vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
    				if(vars.randAnim == undefined) vars.randAnim = 'fade';
    			}
     
                //Run random effect from specified set (eg: effect:'fold,fade')
                if(settings.effect.indexOf(',') != -1){
                    var anims = settings.effect.split(',');
                    vars.randAnim = $.trim(anims[Math.floor(Math.random()*anims.length)]);
                }
     
    			//Run effects
    			vars.running = true;
    			if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
    				settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
    				var timeBuff = 0;
    				var i = 0;
    				var slices = $('.nivo-slice', slider);
    				if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider).reverse();
    				slices.each(function(){
    					var slice = $(this);
    					slice.css('top','0px');
    					if(i == settings.slices-1){
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    						}, (100 + timeBuff));
    					} else {
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    						}, (100 + timeBuff));
    					}
    					timeBuff += 50;
    					i++;
    				});
    			} 
    			else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
    					settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
    				var timeBuff = 0;
    				var i = 0;
    				var slices = $('.nivo-slice', slider);
    				if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider).reverse();
    				slices.each(function(){
    					var slice = $(this);
    					slice.css('bottom','0px');
    					if(i == settings.slices-1){
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    						}, (100 + timeBuff));
    					} else {
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    						}, (100 + timeBuff));
    					}
    					timeBuff += 50;
    					i++;
    				});
    			} 
    			else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || 
    					settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
    				var timeBuff = 0;
    				var i = 0;
    				var v = 0;
    				var slices = $('.nivo-slice', slider);
    				if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider).reverse();
    				slices.each(function(){
    					var slice = $(this);
    					if(i == 0){
    						slice.css('top','0px');
    						i++;
    					} else {
    						slice.css('bottom','0px');
    						i = 0;
    					}
     
    					if(v == settings.slices-1){
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    						}, (100 + timeBuff));
    					} else {
    						setTimeout(function(){
    							slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    						}, (100 + timeBuff));
    					}
    					timeBuff += 50;
    					v++;
    				});
    			} 
    			else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
    				var timeBuff = 0;
    				var i = 0;
    				$('.nivo-slice', slider).each(function(){
    					var slice = $(this);
    					var origWidth = slice.width();
    					slice.css({ top:'0px', height:'100%', width:'0px' });
    					if(i == settings.slices-1){
    						setTimeout(function(){
    							slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    						}, (100 + timeBuff));
    					} else {
    						setTimeout(function(){
    							slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
    						}, (100 + timeBuff));
    					}
    					timeBuff += 50;
    					i++;
    				});
    			}  
    			else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
    				var i = 0;
    				$('.nivo-slice', slider).each(function(){
    					$(this).css('height','100%');
    					if(i == settings.slices-1){
    						$(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
    					} else {
    						$(this).animate({ opacity:'1.0' }, (settings.animSpeed*2));
    					}
    					i++;
    				});
    			}
    		}
    	};
     
    	//Default settings
    	$.fn.nivoSlider.defaults = {
    		effect:'random',
    		slices:15,
    		animSpeed:500,
    		pauseTime:3000,
    		startSlide:0,
    		directionNav:true,
    		directionNavHide:true,
    		controlNav:true,
    		controlNavThumbs:false,
            controlNavThumbsFromRel:false,
    		controlNavThumbsSearch:'.jpg',
    		controlNavThumbsReplace:'_thumb.jpg',
    		keyboardNav:true,
    		pauseOnHover:true,
    		manualAdvance:false,
    		captionOpacity:0.8,
    		beforeChange: function(){},
    		afterChange: function(){},
    		slideshowEnd: function(){}
    	};
     
    	$.fn.reverse = [].reverse;
     
    })(jQuery);

    I'm thinking I have missed something in the linking up with the Xhtml but really don't know. I posted this on the CSS section but doesn't appear to be the problem.

    Thanks.

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is to complicated to detect error

    use this slider instead
    http://www.wiseblog.info/2010/07/05/...ontent-slider/

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    src="Art Images/pic1.jpg"
    this looks wrong

    check your image file names and paths

  4. #4
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vwphillips View Post
    this looks wrong

    check your image file names and paths
    Thanks vwphilips, yes that was the issue, I spotted it the other day. Was a bit of a moment.

    I updated I resolved this on the CSS thread but forgot this one.

    Cheers bud.


Bookmarks

Posting Permissions

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