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 Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Image Gallery Link to Image File

    So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

    The JavaScript:
    Code:
    //<!--
    
    var imgList = new Array(
    	"images/gallery/1.jpg",
    	"images/gallery/2.jpg",
    	"images/gallery/3.jpg",
    	"images/gallery/5.jpg",
    	"images/gallery/6.jpg",
    	"images/gallery/duo.jpg"
    	);
    
    var clientData = new Array(
    '',
    '',
    '',
    '',
    '',
    '',
    ''
    );
    
    var currentMain = 0;
    var currentMainT = 0;
    var current_position=0;
    var all_links="";
    
    function init(){
    	all_links=document.getElementById('gallery').getElementsByTagName('a');
    	all_links[0].style.color="#7d3d3d";
    	ShowMain(current_position);
    }
    
    function color_me(element,color){
    	element.style.color=color;
    }
    
    function Prev(){
    	color_me(all_links[current_position],'#000000');
    	if((current_position-1)>-1){
    		current_position=current_position-1;
    	}
    	else{
    		current_position=(all_links.length-1);
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#7d3d3d');
    }
    
    function direct_selection(number){
    	all_links[current_position].style.color="#000000";
    	current_position=number;
    	ShowMain(current_position);
    	all_links[current_position].style.color="#7d3d3d";
    }
    
    function Next() {
    	color_me(all_links[current_position],'#000000');
    	if((current_position+1)<all_links.length){
    		current_position++;
    	}
    	else{
    		current_position=0;
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#7d3d3d');
    }
    
    function ShowMain(which){
    	currentMain = which;
    	currentMainT = which;
    	if ( currentMain < 0 ) currentMain = 0;
    	if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
    	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
    	document.getElementById('mainImg').src = imgList[currentMain];
    	document.getElementById('mainText').innerHTML = clientData[currentMainT];
    	var PD = document.getElementById('Pg');
    	var PD2 = document.getElementById('Pg2');
    	
    	document.getElementById("mainText").style.display = 'inline';
    //	return false;
    }
    
    onload = function() { ShowMain(0); }
    onload = function() { ShowMainT(0); }
    //-->
    
    
    //<!--
    function preloader(){
    	// counter
    	var i = 0;
    
    	// create object
    	imageObj = new Image();
    
    	// set image list
    	images = new Array();
    	images[0]="images/gallery/1.jpg";
    	images[1]="images/gallery/2.jpg";
    	images[2]="images/gallery/3.jpg";
    	images[3]="images/gallery/5.jpg";
    	images[4]="images/gallery/6.jpg";
    	images[5]="images/gallery/duo.jpg";
    
    
    	// start preloading
    	for(i=0; i<=3; i++){
    		imageObj.src=images[i];
    	}
    }
    //-->

    The HTML where it is displayed:
    Code:
    <img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    By "link directly to the image" do you mean that, when the user clicks on the image, you want it to open in a new window showing just the image??

    If so, it's trivial:
    Code:
    <img id="mainImg" 
           src="images/gallery/1.jpg" 
           style=" border: solid #7d3d3d 5px;" 
           alt="galleryimage" 
           onclick="window.open(this.src,'FULLIMAGE','width=800,height=600');"
    
    />
    The width/height/whether scrollbars show/etc. is all controlled by the third argument to window.open().

    If you use '_blank' instead of 'FULLIMAGE' (or any other name), then each image opens in its own new window, instead of images reusing the same popup window. Usually, that's annoying, so I'd use a name instead. But up to you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rettgoings (08-21-2010)

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks! Thats all I needed to know to figure it out.


  •  

    Posting Permissions

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