SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing Style Element Dynamically

    Hi guys,

    First off, anyone that attempts to help me will go down as a hero in my eyes!

    Basically...I'm making my own changes to a script that was placed on DHTMLGoodies.com (Image Slideshow 5) - http://www.dhtmlgoodies.com/scripts/...ideshow-5.html

    I've improved by adding a lightbox engine into it, and I'm now looking at changing the white border to a 50% opacity border http://www.e-lementdesigns.com/loidland/test.html.

    I've got a bit of CSS that does it nicely:

    Code CSS:
    #width {
     
      width:330px !important; width:338px;
      height:162px !important; height:170px;
      border:4px solid white;
      filter:alpha (opacity=50);
      -moz-opacity:.50;
      opacity:.50;
      -khtml-opacity: 0.5;
    }

    But to apply this, I need to apply this code onto the background of a div:

    Code HTML4Strict:
    <div id="trans" style="width:338px; height:170px; background:url(images/image1_big.jpg) no-repeat;">
     
    <div id="width"></div>
     
    </div>

    But obviously the background image will change depending on which image the user clicks on. Currently the thumbnail link looks like this:

    Code HTML4Strict:
    <a href="#" onclick="showPreview('images/image1_big.jpg',this,'images/image1_big.jpg');return false;"><img src="images/image1.jpg"></a>

    And the showPreview function looks like:

    Code JavaScript:
       function showPreview(imagePath,inputObj,largestImage) 
       {       
     
          var previewPane = document.getElementById('DHTMLgoodies_largeImage'); 
          var aTag = previewPane.getElementsByTagName('A')[0];
            aTag.href = largestImage;
     
    	  if(DHTMLgoodies_currentActiveImage){ 
             if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return; 
             DHTMLgoodies_currentActiveImage.className=''; 
          } 
          DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0]; 
          DHTMLgoodies_currentActiveImage.className='activeImage'; 
     
          DHTMLgoodies_imageToShow = imagePath; 
          var tmpImage = new Image(); 
          tmpImage.src = imagePath; 
          currentUnqiueOpacityId = Math.random(); 
          moveOpacity(opacitySteps*-1,currentUnqiueOpacityId); 
       }

    So instead of changing the SRC of the image from here:

    Code HTML4Strict:
    <div id="DHTMLgoodies_largeImage">
    	<table cellpadding="0" cellspacing="0" width="350">
    		<tr>
    			<td valign="top" align="right">
     
    				<a href="images/image1_big.jpg" rel="lightbox"><img src="images/image1_big.jpg" border="0"></a>
     
    			</td>
    		</tr>
    	</table>
    </div>

    ...to that of a bigger image, I need to change the source of the background from here:

    Code HTML4Strict:
    <div id="DHTMLgoodies_largeImage">
    	<table cellpadding="0" cellspacing="0" width="350">
    		<tr>
    			<td valign="top" align="right">
     
    			<div id="trans" style="width:338px; height:170px; background:url(images/image1_big.jpg) no-repeat;">
    				<div id="width"></div>
    			</div>
     
    			</td>
    		</tr>
    	</table>
    </div>

    If anyone understands that, they're a better man than me!

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't say i really read through all your code , but it would probably start like this:

    Code JavaScript:
    function showPreview(imagePath,inputObj,largestImage) 
       {  
    document.getElementById('trans').style.background = "url('"+imagePath"')";
     
     
    ...maybe some other stuff
     
    }

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how I did it..

    onmouseout="alter(this.firstChild, false);" onmouseover="alter(this.firstChild, true);"
    I had a div with the above properties

    Then I downloaded the prototype lib (prototypejs.org).

    The the alter and offer function look like this:

    clearTimers = new Array();
    function alter(element, status)
    {
    if(status)
    {
    clearTimeout(clearTimers[element.id]);
    $(element).removeClassName('darkBG');
    $(element).addClassName('blueBG');
    }else
    clearTimers[element.id] = setTimeout("offer(document.getElementById('"+element.id+"'));", 100);
    }

    function offer(elementToOff)
    {
    try{
    $(elementToOff).removeClassName('blueBG');
    $(elementToOff).addClassName('darkBG');
    }catch(e){

    }
    }


    This in this case blueBG and darkBG set the div up however you want...

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not working folks....

    I've tried putting:

    Code JavaScript:
    document.getElementById('trans').style.background = "url('"+imagePath"')";

    ...into the showPreview function, but it's just throwing up an undefined error. My worry is that the showPreview isn't the only function being used here, because variables in the showPreview function are being called elsewhere. I didn't perticularly want to do this, but this is my Javascript file. As you can see there is an fade in / fade out animation when the image is changed, and I can only think that, that's playing apart in this somewhere...

    Code JavaScript:
    	var opacitySpeed = 2;	// Speed of opacity - switching between large images - Lower = faster
    	var opacitySteps = 10; 	// Also speed of opacity - Higher = faster
    	var slideSpeed = 5;	// Speed of thumbnail slide - Lower = faster
    	var slideSteps = 8;	// Also speed of thumbnail slide - Higher = faster
    	var columnsOfThumbnails = 1;	// Hardcoded number of thumbnail columns, use false if you want the script to figure it out dynamically.
     
    	/* Don't change anything below here */
    	var DHTMLgoodies_largeImage = false;
    	var DHTMLgoodies_imageToShow = false;
    	var DHTMLgoodies_currentOpacity = 100;
    	var DHTMLgoodies_slideWidth = false;
    	var DHTMLgoodies_thumbTotalWidth = false;
    	var DHTMLgoodies_viewableWidth = false;
     
    	var currentUnqiueOpacityId = false;
    	var DHTMLgoodies_currentActiveImage = false;
    	var DHTMLgoodies_thumbDiv = false;
    	var DHTMLgoodies_thumbSlideInProgress = false;
     
    	var browserIsOpera = navigator.userAgent.indexOf('Opera')>=0?true:false;
    	var leftArrowObj;
    	var rightArrowObj;
    	var thumbsColIndex = 1;
    	var thumbsLeftPos = false;
     
    	function initGalleryScript()
    	{
    		DHTMLgoodies_largeImage = document.getElementById('DHTMLgoodies_largeImage').getElementsByTagName('IMG')[0];
    		var innerDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
    		DHTMLgoodies_slideWidth = innerDiv.getElementsByTagName('DIV')[0].offsetWidth;
    		DHTMLgoodies_thumbDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
    		DHTMLgoodies_thumbDiv.style.left = '0px';
     
    		var subDivs = DHTMLgoodies_thumbDiv.getElementsByTagName('DIV');
    		DHTMLgoodies_thumbTotalWidth = 0;
    		var tmpLeft = 0;
    		for(var no=0;no<subDivs.length;no++){
    			if(subDivs[no].className=='strip_of_thumbnails'){
    				DHTMLgoodies_thumbTotalWidth = DHTMLgoodies_thumbTotalWidth + DHTMLgoodies_slideWidth;
    				subDivs[no].style.left = tmpLeft + 'px';
    				subDivs[no].style.top = '0px';
    				tmpLeft = tmpLeft + subDivs[no].offsetWidth;
    			}
    		}
     
    		DHTMLgoodies_viewableWidth = document.getElementById('DHTMLgoodies_thumbs').offsetWidth;
     
     
    		DHTMLgoodies_currentActiveImage = DHTMLgoodies_thumbDiv.getElementsByTagName('A')[0].getElementsByTagName('IMG')[0];
    		DHTMLgoodies_currentActiveImage.className='activeImage';
    	}
     
    	function moveThumbnails()
    	{
    		if(DHTMLgoodies_thumbSlideInProgress)return;
    		DHTMLgoodies_thumbSlideInProgress = true;
    		if(this.id=='DHTMLgoodies_leftArrow'){
    			thumbsColIndex--;
    			rightArrowObj.style.visibility='visible';
    			if(DHTMLgoodies_thumbDiv.style.left.replace('px','')/1>=0){
    				leftArrowObj.style.visibility='hidden';
    				DHTMLgoodies_thumbSlideInProgress = false;
    				return;
    			}
     
    			slideThumbs(slideSteps,0);
     
    		}else{
    			thumbsColIndex++;
    			leftArrowObj.style.visibility='visible';
    			var left = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;	
    			var showArrow = true;
    			if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth <= DHTMLgoodies_viewableWidth)showArrow = false;
    			if(columnsOfThumbnails)showArrow = true;
     
    			if(!showArrow)	
    			{
    				rightArrowObj.style.visibility='hidden';
    				DHTMLgoodies_thumbSlideInProgress = false;
    				return;
    			}	
     
    			slideThumbs((slideSteps*-1),0);
    		}	
     
    	}
     
    	function slideThumbs(speed,currentPos)
    	{
    		var leftPos;
    		if(thumbsLeftPos){
    			leftPos= thumbsLeftPos;
    		}else{
    			var leftPos = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;
    			thumbsLeftPos = leftPos;
    		}
    		currentPos = currentPos + Math.abs(speed);		
    		var tmpLeftPos = leftPos;
    		leftPos = leftPos + speed;
    		thumbsLeftPos = leftPos;
    		DHTMLgoodies_thumbDiv.style.left = leftPos + 'px';
    		if(currentPos<DHTMLgoodies_slideWidth)setTimeout('slideThumbs(' + speed + ',' + currentPos + ')',slideSpeed);else{
    			if(tmpLeftPos>=0 || (columnsOfThumbnails && thumbsColIndex==1)){
    				document.getElementById('DHTMLgoodies_leftArrow').style.visibility='hidden';
    			}	
    			var left = tmpLeftPos;		
    			var showArrow = true;
    			if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth <= DHTMLgoodies_viewableWidth)showArrow=false;
    			if(columnsOfThumbnails){
    				if((thumbsColIndex+1)<columnsOfThumbnails)showArrow=true; else showArrow = false;				
    			}			
    			if(!showArrow){
    				document.getElementById('DHTMLgoodies_rightArrow').style.visibility='hidden';
    			}					
    			DHTMLgoodies_thumbSlideInProgress = false;
    		}
     
    	}
     
       function showPreview(imagePath,inputObj,largestImage) 
       {       
     
          var previewPane = document.getElementById('DHTMLgoodies_largeImage'); 
          var aTag = previewPane.getElementsByTagName('A')[0];
            aTag.href = largestImage;
     
    	  if(DHTMLgoodies_currentActiveImage){ 
             if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return; 
             DHTMLgoodies_currentActiveImage.className=''; 
          } 
          DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0]; 
          DHTMLgoodies_currentActiveImage.className='activeImage'; 
     
          DHTMLgoodies_imageToShow = imagePath; 
          var tmpImage = new Image(); 
          tmpImage.src = imagePath; 
          currentUnqiueOpacityId = Math.random(); 
          moveOpacity(opacitySteps*-1,currentUnqiueOpacityId); 
       }
     
    	function setOpacity()
    	{
    		if(document.all)
    		{
    			DHTMLgoodies_largeImage.style.filter = 'alpha(opacity=' + DHTMLgoodies_currentOpacity + ')';
    		}else{
    			DHTMLgoodies_largeImage.style.opacity = DHTMLgoodies_currentOpacity/100;
    		}		
    	}
    	function moveOpacity(speed,uniqueId)
    	{
     
    		if(browserIsOpera){
    			DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
    			return;
    		}
     
    		DHTMLgoodies_currentOpacity = DHTMLgoodies_currentOpacity + speed;
    		if(DHTMLgoodies_currentOpacity<=5 && speed<0){
     
    			var tmpParent = DHTMLgoodies_largeImage.parentNode; 
    			DHTMLgoodies_largeImage.parentNode.removeChild(DHTMLgoodies_largeImage);
    			DHTMLgoodies_largeImage = document.createElement('IMG');
    			tmpParent.appendChild(DHTMLgoodies_largeImage);
    			setOpacity();
    			DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
     
    			speed=opacitySteps;
    		}
    		if(DHTMLgoodies_currentOpacity>=99 && speed>0)DHTMLgoodies_currentOpacity=99;		
    		setOpacity();	
    		if(DHTMLgoodies_currentOpacity>=99 && speed>0)return;		
    		if(uniqueId==currentUnqiueOpacityId)setTimeout('moveOpacity(' + speed + ',' + uniqueId + ')',opacitySpeed);		
    	}

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody willing to lend a poor guy a hand?


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
  •