FrogJS - open linke in a new window

[Berlo]

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]

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]

Thank you very much for the time an work.

Thank you for replying first and fast.

Thanks!

[jscheuer1]

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]

Thanks again!

[naikrol]

i had the same problem; ty johnny