PDA

View Full Version : FrogJS - open linke in a new window



Berlo
08-02-2007, 09:07 PM
1) Script Title: FrogJS Image Gallery

2) Script URL (on DD):

http://dynamicdrive.com/dynamicindex4/frogjs/index.htm

3) Describe problem:

How can I make the links open in a new window, when clicking on the image?

Thanks!

jscheuer1
08-03-2007, 03:49 AM
In frog.js find this near the beginning, and add the red part:


// Builds imageArray of all images, thumbnails, credits, and captions
var anchors = $('FrogJS').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
imageArray[i] = new Array();
imageArray[i]['full'] = anchors[i].getAttribute('href');
imageArray[i]['credit'] = anchors[i].getAttribute('title');
imageArray[i]['thumb'] = anchors[i].getElementsByTagName('img')[0].getAttribute('src');
imageArray[i]['caption'] = anchors[i].getElementsByTagName('img')[0].getAttribute('alt');
imageArray[i]['link'] = anchors[i].getAttribute('rel');
imageArray[i]['target'] = anchors[i].getAttribute('rev');
}

Next, find this section nearer to the bottom (starting around line #157):


// loadMainImage()
// Fades out old main image and fades in new one. Also updates credit and caption
loadMainImage: function(imageNum, width){
Element.setCursor('FrogJSImage','');
$('FrogJSImage').onclick = function(){};
new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
function showMainImage(){
$('FrogJSImage').style.display = 'block';
$('FrogJSImage').src = imageArray[imageNum]['full'];
$('FrogJSMainContainer').style.width = width+'px';
$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
if(imageArray[imageNum]['link']){
Element.setCursor('FrogJSImage','pointer');
$('FrogJSImage').onclick = function(){
location.href = imageArray[imageNum]['link'];
}
}
}
}
},

Replace it with (change highlighted red):


// loadMainImage()
// Fades out old main image and fades in new one. Also updates credit and caption
loadMainImage: function(imageNum, width){
Element.setCursor('FrogJSImage','');
$('FrogJSImage').onclick = function(){};
new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
function showMainImage(){
$('FrogJSImage').style.display = 'block';
$('FrogJSImage').src = imageArray[imageNum]['full'];
$('FrogJSMainContainer').style.width = width+'px';
$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
if(imageArray[imageNum]['link']){
Element.setCursor('FrogJSImage','pointer');
$('FrogJSImage').onclick = function(){
window.open(imageArray[imageNum]['link'],imageArray[imageNum]['target']||'_self');
}
}
}
}
},

Once you have done that, the script will behave exactly as it always did, unless you specify a rev attribute in the link, ex:


<a href="images/1.jpg" title="Google" rel="http://www.google.com/" rev="_new"> . . .

If you do that, you will get a new window. You can also use this rev attribute to target a named frame, named iframe, or named existing window.

Berlo
08-03-2007, 04:12 AM
Thank you very much for the time an work.

Thank you for replying first and fast.

Thanks!

jscheuer1
08-03-2007, 08:34 AM
I played around with this a bit more, thinking it would be neat to be able to open a customized new window. I worked out a method whereby that could be done. I made the first change look like so:


// Builds imageArray of all images, thumbnails, credits, and captions
var anchors = $('FrogJS').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
imageArray[i] = new Array();
imageArray[i]['full'] = anchors[i].getAttribute('href');
imageArray[i]['credit'] = anchors[i].getAttribute('title');
imageArray[i]['thumb'] = anchors[i].getElementsByTagName('img')[0].getAttribute('src');
imageArray[i]['caption'] = anchors[i].getElementsByTagName('img')[0].getAttribute('alt');
imageArray[i]['link'] = anchors[i].getAttribute('rel')?anchors[i].getAttribute('rel').split('::')[0]:null;
imageArray[i]['target'] = anchors[i].getAttribute('rel')?anchors[i].getAttribute('rel').split('::')[1]:null;
imageArray[i]['specs'] = anchors[i].getAttribute('rev');
}

and the second one:


// loadMainImage()
// Fades out old main image and fades in new one. Also updates credit and caption
loadMainImage: function(imageNum, width){
Element.setCursor('FrogJSImage','');
$('FrogJSImage').onclick = function(){};
new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
function showMainImage(){
$('FrogJSImage').style.display = 'block';
$('FrogJSImage').src = imageArray[imageNum]['full'];
$('FrogJSMainContainer').style.width = width+'px';
$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
if(imageArray[imageNum]['link']){
Element.setCursor('FrogJSImage','pointer');
$('FrogJSImage').onclick = function(){
window.open(imageArray[imageNum]['link'],imageArray[imageNum]['target']||'_self',imageArray[imageNum]['specs']||'');
}
}
}
}
},

This allowed for normal operation as before, but now the target (if used) would be added to the rel attribute, like so using :: as a separator:


<a href="images/1.jpg" title="Google" rel="http://www.google.com/::_blank"> . . .

Just that much would get you a new window (target="_blank"), and if you wanted to add custom specifications, that's what I now used the rev attribute for:


<a href="images/1.jpg" title="Google" rel="http://www.google.com/::_blank" rev="width=550, height=330, scrollbars"> . . .

Berlo
08-31-2007, 07:20 AM
Thanks again!

naikrol
01-31-2010, 08:08 PM
i had the same problem; ty johnny