Echo Selected Thumbnail

**Nightasy** · 07-18-2013, 09:38 PM

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

My problem may or may not be related to the script but using this script how can I echo the url for the image that is selected?

For instance if I click the thumbnail to expand the large image how can I also echo the url for the large image that was selected onto the page, like into a textbox? I'd like to not only show the user the large image but also provide them with a url so they can link it in an [img] tag on another website.

**jscheuer1** · 07-19-2013, 03:38 AM

The link in your post to the Image Thumbnail Viewer II script is broken. I assume you mean:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

As to your question, it depends. How are you using the script. It sounds like you are using click ativarion instead of mouseover activation. If so, you can just put the address of the as the title of the thumbnail link. But it would be easier to let jQiery do that for you. Put this in the head of the page after the script tags for Thumbnail Viewer II:

Code:

<script type="text/javascript">
jQuery(function($){
	$('a[rel="enlargeimage"]').each(function(i, a){
		a.title = a.href;
	});
});
</script>

**Nightasy** · 07-19-2013, 04:32 AM

@jscheuer1:

What I am trying to do is take the url for the image that is enlarged and place it inside a text block that can be copied to the clipboard on click. While the title does show the url of the image below the image it's not exactly in a form I can work with. I've never attempting anything like this before so I'm not sure how to go about it.

My page works like this. User uploads an image > user visits gallery > gallery creates medium size image and thumbnail from large image > Clicking thumbnail shows medium imageand the medium image can be clicked to see the original image in another window. That last step is where the script from this site comes in. What I want is to take the url from the medium image that links to the original image and place it inside of a clickable text area that copies the url to the users clipboard preferably with [img] tags on it.

Looking at your JQuery script, it seems like it can do what I am looking for or least assist me in doing what I am wanting. I just don't know how to write jscript. 8(

I did notice this in the script for the image viewer

Code:

$anchor.attr('title')

I'm guessing I can use this attribute to place the url into a text area instead of below the image? I should mention that the page is built almost entirely in PHP. I'm a PHP guy 8D

**jscheuer1** · 07-19-2013, 05:22 AM

If I'm not mistaken, in a setup like that, the URL would be in the address bar of the other window. If so, that's not a page and is no longer a part of this script. But you might mean something else, and even if you don't, that URL as an image tag could fairly easily be displayed in a text input or textarea on the page with the Thumbnail Image Viewer II script on it. Clicking a text input/textarea to copy it to clipboard is unwise though. The user might not be prepared for that. It might overwrite something on the clipboard that they don't want to lose. And certain browser/OS combinations cannot do that anyway. Click to highlight is a better choice. The way that works is instead of (how a text input/textarea usually works) right click, select all, right click, copy, they can just right click, copy.

Is the other window with the large image in it a page, or just the image in the window? Do you even have that much setup yet? If so, please provide a link to the page.

**Nightasy** · 07-19-2013, 05:40 AM

The site is not live as of right now so I can't provide a link to it. It's in the development stages at this point running on my localhost using WAMP in tandem with Dreamweaver.

Here is what I did in a foreach image loop with the thumbnail url.

Code:

echo '<a class="DDImage" href="',$medium_image,'" title="',$images_dir.$file,'" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal,link:',$images_dir.$file,'"><img class="photo-link" src="',$thumbnail_image,'" /></a>';

$thumbnail_image is the path to the thumbnail version of the image that was uploaded.
$medium_image is the path to the medium version of the image that displays when clicking on the thumbnail.
$images_dir.$file is the path to the original image.

Having it setup this way it works perfectly. Each thumbnail image is displayed in a thumbnail div and when clicked displays the medium image inside of the loadarea div. It also displays the title for the original image url below the medium image. As you can see when the medium image is clicked it changes to another page that displays just the original image.

What I'd like to have it do is instead of displaying the title below the image, display the title inside of a text area. I do like that recommendation to have the text area simply highlight all when clicked though as you recommended. I'll have to look into that but first I have to get the title from below that medium image and into a text area.

**jscheuer1** · 07-19-2013, 06:14 AM

I see, probably editing the script would be the best way. And since you probably don't want the large image URL as a tootip, and since it's already in the link: part of the rev attribute, it would probably be best to pull it from there.

BTW, shouldn't those commas around the PHP variables in your code block be periods?

Anyways, as long as PHP is parsing it the way you want it to, I guess it doesn't matter.

I'll look at the script. The highlight on click part is easy though it varies with jQuery versions. The one (1.4.2) used on the demo page would do it like so:

Code:

<script type="text/javascript">
jQuery('textarea, input:text').live('focus', function(){
	this.select();
});
</script>

Which would be good through jQuery version 1.8.x. After that the live() method was dropped for the on() method, which has a different syntax.

I'll have a look at the script, putting that URL into a test input or, if you want it as an HTML image tag, a textarea would probably be better, should be a fairly easy mod.

**Nightasy** · 07-19-2013, 06:27 AM

Thanks for your time and for giving this a look see. I've been dabbling with this script for a few days and it's really working well on my site. It's the perfect fit for my setup.

As to the commas, it's an "either or" type deal in that situation. Periods work for it too.

**jscheuer1** · 07-19-2013, 06:53 AM

OK, so your PHP can be without a title:

PHP Code:


echo '<a class="DDImage" href="'.$medium_image.'" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal,link:'.$images_dir.$file.'"><img class="photo-link" src="'.$thumbnail_image.'" /></a>';

Use this updated version of the script (right click and 'Save As'):

thumbnailviewer2.js

And put that code from my last post in the head of the page after the script tag for jQuery.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Oh, the created textarea has a class of 'largetag' if you want to style it.

**Nightasy** · 07-19-2013, 07:58 AM

You rock, this is great. I can definitely work with this. This imp articular line of code:

Code:

imghtml='<div>'+imghtml+(setting.link? '<br /><textarea class="largetag" cols="50" rows="2" wrap="off"><img src="'+$('<a href="'+setting.link+'">').get(0).href+'" alt=""></textarea>' : "")+'</div>'

That actually makes sense to me and I believe I can actually tweak that a bit to my liking. More imp particularly:

Code:

<img src="'+$('<a href="'+setting.link+'">').get(0).href+'" alt="">

Could just as easily be set to say:

Code:

[img]'+$('<a href="'+setting.link+'">').get(0).href+'[/img]

To provide a user a means of which to easily link the image in a forum. I can definitely play around with this. Looking at this I actually kind of understand how it works. Not entirely, but enough to play around with it.

This is exactly what I wanted and was talking about. Thank you very much.

In fact, looking at this I could actually add multiple different text boxes I bet this works too:

Code:

imghtml='<div>'+imghtml+(setting.link? '<br /><textarea class="largetag" cols="50" rows="2" wrap="off"><img src="'+$('<a href="'+setting.link+'">').get(0).href+'" alt=""></textarea><textarea class="largetag" cols="50" rows="2" wrap="off">[img]'+$('<a href="'+setting.link+'">').get(0).href+'[/img]</textarea>' : "")+'</div>'

Yep, it does. Man this is awesome!

**jscheuer1** · 07-19-2013, 10:39 AM

Right. You can make things more efficient and at the same time more easily configurable, like so:

Code:

/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892

jQuery.noConflict()

jQuery.thumbnailviewer2={
		loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct
		textbox: ['<textarea class="largetag" cols="50" rows="2" wrap="off">', '</textarea>'], //Before and after HTML for textboxes

	/////NO NEED TO EDIT BEYOND HERE////////////////

	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
	buildimage:function($, $anchor, setting){
		var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />',
		link = setting.link? $('<a href="'+setting.link+'">').get(0).href : '';
		if (link)
			imghtml='<a href="'+link+'">'+imghtml+'</a>'
		imghtml='<div>'+imghtml+(link? '<br />'+this.textbox[0]+'<img src="'+link+'" alt="">'+
		this.textbox[1]+this.textbox[0]+'[img]'+link+'[/img]'+this.textbox[1] : "")+'</div>'
		return $(imghtml)
	},