...

View Full Version : Image Gallery Link to Image File



rettgoings
08-20-2010, 04:04 PM
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:

//<!--

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:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

Old Pedant
08-20-2010, 09:08 PM
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:


<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.

rettgoings
08-21-2010, 09:09 PM
Thanks! Thats all I needed to know to figure it out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum