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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pleeeeeaaasssseee help!!!!

    Please help. Have a site uploaded called theshoulderhopper.com, when you click on thumbnails on 15 inch screen image opens up ok, but anything bigger image opens up half way down page. Using a thumbnail viewer J.s script. here is copy. I can make image open where I like but how do I get it to open up in correct place on bigger screen?
    Code:
    // JavaScript Document// JavaScript Document
    // -------------------------------------------------------------------
    // Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
    // Last updated: July 7th, 2008- Fixed enlarged image not showing in IE sometimes
    // -------------------------------------------------------------------
    
    var thumbnailviewer={
    enableTitle: true, //Should "title" attribute of link be used as description?
    enableAnimation: true, //Enable fading animation?
    definefooter: '<div class="footerbar"></div>', //Define HTML for footer interface
    defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
    /////////////No need to edit beyond here/////////////////////////
    
    scrollbarwidth: 16,
    opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
    targetlinks:[], //Array to hold links with rel="thumbnail"
    
    createthumbBox:function(){
    //write out HTML for Image Thumbnail Viewer plus loading div
    document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
    document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
    this.thumbBox=document.getElementById("thumbBox")
    this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
    this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    },
    
    
    centerDiv:function(divobj){ //Centers a div element on the page
    var ie=document.all && !window.opera
    var dom=document.getElementById
    var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
    var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
    var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
    var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
    var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
    var objwidth=divobj.offsetWidth //width of div element
    var objheight=divobj.offsetHeight //height of div element
    var topposition=(docheight>objheight)? scroll_top+docheight/1.9-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
    divobj.style.left=docwidth/2.0-objwidth/2+"px" //Center div element horizontally
    divobj.style.top=Math.floor(parseInt(topposition))+"px"
    divobj.style.visibility="visible" 
    
    },
    
    showthumbBox:function(){ //Show ThumbBox div
    thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
    this.centerDiv(this.thumbBox)
    if (this.enableAnimation){ //If fading animation enabled
    this.currentopacity=0.1 //Starting opacity value
    this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
    }
    },
    
    
    loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
    if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
    this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
    var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
    if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
    imageHTML+='<br />'+link.getAttribute("title")
    this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
    this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
    this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
    if (this.featureImage.complete)
    thumbnailviewer.showthumbBox()
    else{
    this.featureImage.onload=function(){ //When target image has completely loaded
    thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
    }
    }
    if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
    this.featureImage.src=link.getAttribute("href")
    this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
    thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
    }
    },
    
    setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
    var targetobject=this.featureImage
    if (targetobject.filters && targetobject.filters[0]){ //IE syntax
    if (typeof targetobject.filters[0].opacity=="number") //IE6
    targetobject.filters[0].opacity=value*100
    else //IE 5.5
    targetobject.style.filter="alpha(opacity="+value*100+")"
    }
    else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
    targetobject.style.MozOpacity=value
    else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
    targetobject.style.opacity=value
    else //Non of the above, stop opacity animation
    this.stopanimation()
    },
    
    opacityanimation:function(){ //Gradually increase opacity function
    this.setimgopacity(this.currentopacity)
    this.currentopacity+=0.1
    if (this.currentopacity>1)
    this.stopanimation()
    },
    
    stopanimation:function(){
    if (typeof this.opacitytimer!="undefined")
    clearInterval(this.opacitytimer)
    },
    
    
    closeit:function(){ //Close "thumbbox" div function
    this.stopanimation()
    this.thumbBox.style.visibility="hidden"
    this.thumbImage.innerHTML=""
    this.thumbBox.style.left="-2000px"
    this.thumbBox.style.top="-2000px"
    },
    
    cleanup:function(){ //Clean up routine on page unload
    this.thumbLoading=null
    if (this.featureImage) this.featureImage.onload=null
    this.featureImage=null
    this.thumbImage=null
    for (var i=0; i<this.targetlinks.length; i++)
    this.targetlinks[i].onclick=null
    this.thumbBox=null
    },
    
    dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
    target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
    target.attachEvent(tasktype, functionref)
    },
    
    init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
    if (!this.enableAnimation)
    this.opacitystring=""
    var pagelinks=document.getElementsByTagName("a")
    for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
    if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
    pagelinks[i].onclick=function(){
    thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
    thumbnailviewer.loadimage(this) //Load image
    return false
    }
    this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    //Reposition "thumbbox" div when page is resized
    this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")
    
    
    } //END init() function
    
    }
    
    thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
    thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
    thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")
    Last edited by Kor; 06-08-2010 at 04:29 PM. Reason: wrap the code [code][/code]

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Try this instead. Most DynamicDrive scripts are obsolete.

    Copy the following, save as an .html document. Edit the image src, width, height and alt, to suit.

    The width of the .imageContainer class, determines how many thumbs appear in a row, e.g., 185 + 160 + 215 + 140 + 125 = 825 825 > 800, so 4 images will be in the row, not 5, 185 + 160 + 215 + 140 = 700, 700 < 800.

    You'll also need to save the two attached images.

    Note the path, too: ./images/


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Animated Image Fade-in, Click for Full-size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    /*   Animated Image Fade-in, Click for Full-size */
    /*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
    /*   Free use of the code, so long as the above notice is kept intact */
    
    	var loadingImageSrc = "./images/loading.gif";
    	loadingImage = document.createElement('img');
    	loadingImage.src = loadingImageSrc; 	
    	var grandLoadingGIF = document.createElement('img');
    	grandLoadingGIF.src = "./images/grand_loading.gif";	
    	var sWidth = screen.width;
    	var sHeight = screen.height;
    	var fullSizePct = "";
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    
    	function displayFull(){
    
    		var nV = document.documentElement.scrollTop;
    		var origWidth = popImg.width;
    		popImg.width = Math.round(origWidth * fullSizePct);	
    		popDiv.style.left = Math.round((sWidth - popImg.width)/2) + "px";	
    		popDiv.style.top = Math.round(((sHeight - popImg.height)/4) - (30 * fullSizePct)) + nV + "px";							
    	}
    
    	function openFullSize(nSrc){
    		
    		while (popDiv.lastChild)
    			{
    		 	 popDiv.removeChild(popDiv.lastChild);
    			 popDiv.style.top = "-10000px";
    			}
    		popImg = document.createElement("img");
    		!IE ? popImg.style.marginBottom = "-4px" : null;	
    		popImg.alt = "Click to close";
    		popImg.title = "Click to close";		
    		popDiv.appendChild(popImg);
    		nBody.appendChild(popDiv);	
    		popImg.src = nSrc;
    		nShadow.style.width = document.documentElement.clientWidth + "px";
    		nShadow.style.height =  document.documentElement.scrollHeight >= document.documentElement.clientHeight ? document.documentElement.scrollHeight + "px"
    											  				: document.documentElement.clientHeight + "px";
    		nShadow.style.display = "";
    		grandLoadingGIF.style.top = (document.documentElement.clientHeight / 2) - 16
    					  + document.documentElement.scrollTop + "px";					
    		grandLoadingGIF.style.left = (document.documentElement.clientWidth / 2) - 16 + "px";
    		grandLoadingGIF.style.display = "";	
    		setTimeout("displayFull()", 900);	
    		popDiv.onclick = function()
    			{			
    			 nShadow.style.display = "none"; 
    			 grandLoadingGIF.style.display = "none";
    			 this.style.top = "-10000px";	
    			 while (popDiv.lastChild)
    				{
    			 	 popDiv.removeChild(popDiv.lastChild)
    				}	
    			}
    	}
    
    	function brushIn(nStaticImg){
    
    		var nOpacity = 0;			
    		var nInterval = setInterval(function()
    			{
    		 	 nOpacity < 100 ? nOpacity = nOpacity + 2 : clearInterval(nInterval);
    		 	 IE ? nStaticImg.style.filter = "alpha(opacity = "+nOpacity+")"
    		 	 : nStaticImg.style.opacity = (nOpacity / 100); 
    			}, 25);	
    		IE ? nStaticImg.detachEvent('onload', brushIn, false) : nStaticImg.removeEventListener('load', brushIn, false);	 
    	}
    
    	function init(){		
    			
    		var nLoadImg = "";		
    		var nWrapper = "";
    		var imageArchive = [];	
    		var nStaticImg = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "imgContainer")
    				{
    				 var nContainer = nDiv[i];				 
    				}
    			}
    		fullSizePct = (nContainer.title.replace(/%/, "") / 100).toFixed(2);
    		nContainer.title = "Click to Enlarge";
    		var nImg = nContainer.getElementsByTagName('img');
    		var imgCount = nImg.length;			
    		for (i=0; i<nImg.length; i++)
    			{
    			 imageArchive[i] = [nImg[i].src, nImg[i].width, nImg[i].height];
    			 nStaticImg[nStaticImg.length] = document.createElement('img');		 
    			}
    		while (nContainer.lastChild)
    			{			 
    			 nContainer.removeChild(nContainer.lastChild);
    			}
    		nContainer.style.visibility = "visible";
    		for (i=0; i<imgCount; i++)
    			{			 
    			 nLoadImg = document.createElement('img');
    			 nLoadImg.style.position = "absolute";
    			 nLoadImg.style.backgroundColor = "#90ee90";
    			 nLoadImg.alt = "";
    			 nLoadImg.src = loadingImage.src;								
    		 	 nStaticImg[i].onload = function()
    				{				
    			 	 brushIn(this);
    				}			
    			 nStaticImg[i].src = imageArchive[i][0];
    			 IE ? nStaticImg[i].style.filter = "alpha(opacity = 0)" : nStaticImg[i].style.opacity = 0;			 	
    			 imageArchive[i][2] >= nContainer.clientHeight - 15
    				 ? imageArchive[i][2] = nContainer.clientHeight - 15
    				 : imageArchive[i][2];
    			 nStaticImg[i].height = imageArchive[i][2];
    			 nStaticImg[i].width = imageArchive[i][1];	
    			 nStaticImg[i].style.position = "relative";
    			 nStaticImg[i].style.cursor = "pointer";	
    			 nStaticImg[i].style.marginBottom = nContainer.clientHeight - imageArchive[i][2] - 12 + "px";	
    			 nStaticImg[i].onclick = function()
    				{
    				 openFullSize(this.src);
    				}	
    			 nLoadImg.style.top = (imageArchive[i][2] / 2) - 12 + "px";
    			 nLoadImg.style.left = (imageArchive[i][1] / 2) - 12 + "px";
    			 nWrapper = document.createElement('div');			 
    			 IE ? nWrapper.style.styleFloat = "left" : nWrapper.style.cssFloat = "left";			
    			 nWrapper.style.position = "relative";	
    			 nWrapper.style.paddingRight = "5px";	
    			 nWrapper.appendChild(nLoadImg);
    			 nWrapper.appendChild(nStaticImg[i]);			
    			 nContainer.appendChild(nWrapper);		
    			 nBody = document.getElementsByTagName("body")[0];	
    			 popDiv = document.createElement('div');
    			 popDiv.style.position = "absolute";
    			 popDiv.style.top = "-10000px";
    			 popDiv.style.cursor = "pointer";
    			 popDiv.style.border = "1px solid black";		 
    			 nShadow = document.createElement('div');		
    		 	 nShadow.style.backgroundColor =  "#808080"; 
    			 nShadow.style.position = "absolute";
    			 nShadow.style.top = "0px";
    			 nShadow.style.left = "0px";
    			 nShadow.style.display = "none";
    			 IE ? nShadow.style.filter = "alpha(opacity = 75)" : nShadow.style.opacity = .75;	
    			 nBody.appendChild(nShadow);	
    			 nBody.appendChild(grandLoadingGIF);
    			 grandLoadingGIF.style.display = "none"; 
    			 grandLoadingGIF.style.position = "absolute";			
    			 grandLoadingGIF.style.backgroundColor = "#90ee90";						
    			} 		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body	{margin-top: 200px;}
    	.imgContainer {position: relative; visibility: hidden;  border: 1px solid black;
    		       width: 800px; height: 310px; background-color: #f0fff0; margin-left: auto;
    		       margin-right: auto; padding-left: 3px; overflow: auto; padding-bottom: 5px;}	
    	.imgContainer img {margin-top: 3px; margin-bottom: 3px; border: 1px solid blue;}
    	
    </style>
    </head>
    <body>
    
    	<div class="imgContainer" title="90%"> <!-- title = the size at which the "full size" images will be displayed. -->
    		
    		<img src="./images/CBa.jpg" width="185" height="225" alt="">		
    		<img src="./images/CBb.jpg" width="160" height="170" alt="">
    		<img src="./images/CBc.jpg" width="215" height="300" alt="">	
    		<img src="./images/CBd.jpg" width="140" height="250" alt="">		
    		<img src="./images/CB1.jpg" width="125" height="185" alt="">
    		<img src="./images/CBa.jpg" width="185" height="225" alt="">	
    		<img src="./images/CBb.jpg" width="160" height="170" alt="">
    		
    	</div>
    	
    </body>
    </html>
    Attached Images Attached Images   

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Pleeeeeaaasssseee help!!!!
    Don't yell on us without sending any piece of information. Everybody posting here need help, thus it is redundant to ask for help. Better use the title to give us some information about the nature of your problem.

    And nest your codes inside [ code ][ /code ]. Or use the # button of the editor for that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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