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
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    How to do this in jquery...(simple)

    I'm trying to fade in an image rather than just switching immediately as it currently does.

    This is the actual line that switches to the new image:
    Code:
    document[Banner.name].src = Banner.pathURL + Banner.imageSrc[Banner.startPic-1];
    I've tried various ways but all the examples rely on a .click to start the fade and I can't get it to work for some reason. The other problem with existing examples is they use $('img') which affects all my images on the page not just the one I want.

    The context of it being used:
    Code:
    Banner.startPic++;		
    		if(Banner.startPic > Banner.numPix){
    			Banner.startPic = 1;
    		}	
    document[Banner.name].src = Banner.pathURL + Banner.imageSrc[Banner.startPic-1];
    So each time I call the function that's in and increment "Banner.startPic" it loads the next image.

    I tried:
    Code:
    $('#'+Banner.name+'').attr('src',Banner.pathURL + Banner.imageSrc[Banner.startPic-1]).fadeIn(2000);
    and several other combinations but can't figure it out. Any ideas?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,922
    Thanks
    56
    Thanked 548 Times in 545 Posts
    you would use this:
    Code:
    $('#'+Banner.name)
    if you were targeting the ID of the image, but it appears to me that you are targetting its name, which I believe would look like this:

    Code:
    $('img[name='+Banner.name+']')
    not sure about the rest of your function, but that may be a start

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for clearing up the syntax, I didn't know you could do it like that second part.

    Still can't get it working and have a second issue so I'll just post the whole shebang:
    Code:
    //2 banner objects
    var banner = {
    	id: 'ChangingPix',
    	numPix: 4,
    	pSpeed: 5000,
    	startPic: 1,
    	width: 633,
    	height: 680,	
    	url: '',
    	BannerImgs: ['1.gif', '2.jpg', '3.jpg', '4.jpg']	
    }
    var bodySlider = {
    	id: 'bodySlide',
    	numPix: 7,
    	pSpeed: 5000,
    	startPic: 1,
    	width: 1000,
    	height: 288,	
    	url: 'http://pugetsoundtraining.com/Portfolio/images/',
    	BannerImgs: ['reel_1.jpg','reel_2.jpg', 'reel_3.jpg', 'reel_4.jpg', 'reel_5.jpg', 'reel_6.jpg', 'reel_7.jpg']
    }
    
    function MakeBanner(obj){	//Constructor		
    	var Banner = {
    		name: obj.id,
    		numPix: obj.numPix,
    		startPic: obj.startPic,
    		width: obj.width,
    		height:obj.height,
    		pSpeed: obj.pSpeed,
    		imageSrc: obj.BannerImgs,
    		pathURL: obj.url,		
    			init: function(){				
    				setInterval(Banner.update, Banner.pSpeed);
    			},
    			update: function(){				
    				Banner.startPic++;		
    					if(Banner.startPic > Banner.numPix){
    						Banner.startPic = 1;
    					}									
    //$('#'+Banner.name).attr('src', Banner.pathURL + Banner.imageSrc[Banner.startPic-1]);	//didn't work
    //$('img[name="'+Banner.name+']"').attr('src', Banner.pathURL + Banner.imageSrc[Banner.startPic-1]);	//Didn't work
    										
    		document[Banner.name].src = Banner.pathURL + Banner.imageSrc[Banner.startPic-1];	//This works		
    			},
    			setPic: function(p){
    			Banner.startPic = p;
    			Banner.update();
    			console.log('setpic'+ (p));
    			},
    					
    	}				
    			for(var p=1; p < 8; p++){ 
    				var newdiv = document.createElement('div'); 	//Create new div
    				newdiv.setAttribute('id', p); 	//Set ID				
    				newdiv.style.position="absolute";		//Set Position
    				newdiv.style.width = 30+'px';		
    				newdiv.style.height = 30+'px';			
    				newdiv.style.left = 650+ 25*p+'px';
    				newdiv.style.top = 1300+'px';							
    				$(newdiv).css("fontSize",30);
    				newdiv.innerHTML = p;				
    				$(newdiv).click(function(){
    	    					Banner.setPic(p); //ONLY SENDS 8, not 1-7
    					});					
    				document.body.appendChild(newdiv);	
    									
    					}				
    		Banner.init();	
    }
    The lower part that loops through "p" was my attempt at pagination, but when you click any of the 7 numbers it only sends the last one....even if you click 1, 2, 3, 4 it sends "setpic 8".

    The actual site is here: www.leefromseattle.com The bottom banner is the one I'm trying to generate, there's another one right above it I'm trying to rewrite myself....but just trying to get the functionality down before I take it out...

    Anyone see anything?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,922
    Thanks
    56
    Thanked 548 Times in 545 Posts
    it sounds like a problem with function closure (the thing I was talking about in your "which way is better " thread). I used to have a good link that explained the whole thing, but can't find it now - have a google and see if that helps.


  •  

    Posting Permissions

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