Change positions of image description in image gallery

**arnaudpopi** · 09-26-2010, 12:35 PM

1) Script Title: :: Image Thumbnail Viewer II

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

3) Describe problem: I like this script and am using it, I created a table with 3 columns and put the thumbs on the right, the div with the large image on the left and now would like to bring the description of the pics to the middle column upon clicking on the thumbs. So the big image and desc will appear when I click on the thumb.
Can I please get some help?

**jscheuer1** · 09-26-2010, 02:18 PM

So you have something like (from the demo page):

Code:

<a href="bulb.gif" rel="enlargeimage" rev="option1:value1,option2:value2,option3:value3, etc">Thumbnail</a>

Yours is probably more like:

Code:

<a href="bulb.gif" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click" title="Some Description">Thumbnail</a>

Let's zoom in on the highlighted and add to it:

Code:

rev="targetdiv:loadarea,trigger:click,enabletitle:no"

Give the td element of the middle column a unique id - say "descarea":

HTML Code:

<td id="descarea">

Or, if you prefer, put a div element inside that td and give it the unique id instead.

Then put this script in the head of your page after the other scripts:

Code:

<script type="text/javascript">
jQuery(function($){
	var description = $('#descarea'), title;
	$('a[rel=enlargeimage]').click(function(){
		title = this.title || '';
		description.html(title);
	});
});
</script>

Notice the red id, make sure it's the same as the unique id you used for where you want the description showing up.

**arnaudpopi** · 09-26-2010, 08:23 PM

hi John
Thank you very much for your help
i pretty much managed to correct the code as you wrote and it`s working fine exept that the desc is shown both in the new div and under the big pic. Can you suggest how to fix that?

Also im trying to build it using 2 iframes-- 1 for the thumbs and 1 for the desc and enlarged image -- how do i get it to work the same now that i added the iframes?
here is the code I have:

---------------------------------------------------------------------------------------------------------
thanks again in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.js">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">
jQuery(function($){
var description = $('#desc'), title;
$('a[rel=enlargeimage]').click(function(){
title = this.title || '';
description.html(title);
});
});
</script>

</head>

<body>

<table width="525" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="662" height="339" valign="top">

<div id="loadarea" style="width:510px; height: 220px; float: left;"></div>

</td>

<td id="desc" width="150" align="center" valign="top" >
<div id="desc" style="width:auto; height:100px; float: right;"> </div> </td>

<td width="100" align="right" valign="top">

<a href="M_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea ,trigger:click,enabletitle:no" title="1"><img border="0" src="tmb_M_3.jpg" width="91" height="61" /></a>
<br />
<br />
<a href="M_5.jpg" rel="enlargeimage" rev="targetdiv:loadarea ,trigger:click,enabletitle:no" title="2"><img border="0" src="tmb_M_6.jpg" width="91" height="61" /></a>
<br />
<br />
<a href="M_6.jpg" rel="enlargeimage" rev="targetdiv:loadarea ,trigger:click,enabletitle:no" title="3"><img border="0" src="tmb_M_13.jpg" width="91" height="61" /></a><br />
<br />
<a href="M_7.jpg" rel="enlargeimage" rev="targetdiv:loadarea ,trigger:click,enabletitle:no" title="4"><img border="0" src="tmb_M_8.jpg" width="91" height="61" /></a></td>
</tr>
</table>

</body>
</html>

**jscheuer1** · 09-26-2010, 11:28 PM

I don't think it makes a difference but here and similar (from your post):

Code:

rev="targetdiv:loadarea ,trigger:click,enabletitle:no"

There should be no space there.

The real problem is that the script doesn't perform as advertised (from the demo page):

enabletitle: yes|no "yes" enabletitle is set to "yes" by default, with the effect being that if your thumbnail link carries a "title" attribute, the script will use that to show a description beneath the enlarged image:

<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea">Thumbnail</a>

To stop a description from showing, either set enabletitle to "no" or simply remove the "title" attribute from the thumbnail.

So we have to fix the script in order to make it do what was promised. Find this highlighted line in the thumbnailviewer2.js file:

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
*/

jQuery.noConflict()

jQuery.thumbnailviewer2={
		loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

	/////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" />'
		if (setting.link)
			imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
		imghtml='<div>'+imghtml+((setting.enabletitle && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
		return $(imghtml)
	},

	showimage:function($image, setting){
		$image.stop()[setting.fxfunc](se . . .

Change it to (addition highlighted):

Code:

		imghtml='<div>'+imghtml+((setting.enabletitle !== 'no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'

Note: Ordinarily I don't like editing the main script if it can be avoided. However, in this case it seems appropriate because it's supposed to do this and doesn't.

**arnaudpopi** · 09-27-2010, 05:35 PM

hi John,
Thanks a lot, the script works fine now, however as I mentioned I put the slideshow in iframes, where the thumbnail is in one iframe and the desc and the big picture are in another iframe. How do I tell thumbnail to bring the desc and the big picture to the second iframe? Also when I scroll f through the thumbnails, I don't want it to cause the whole slideshow to move.

I tried various things, but with no luck.
Please can you tell me if it is possible and how?

**jscheuer1** · 09-27-2010, 06:29 PM

I see no iframe in your sample code.

Doing this would probably require customizing the script, as it would have to target elements on another page, rather than ones on the same page as it currently does. I see no good reason for using iframe here though, can you explain your thinking?

I would add that iframe (and frame) are non-standard in their implementation and in the process of being deprecated. So they're not the best choice in page development. If there's any other way to get the look and feel you want, whatever that is would probably be preferable.

Added Later:

BTW - I submitted that bit about enabletitle as a bug report. It's already been corrected in the script now available on the demo page.

**arnaudpopi** · 09-28-2010, 06:19 PM

Thank you very much for the fast answers--eventually I used a table and added a scrollbar and used the script as is. But as I continued with the script and tried to edit the description by changing the font size and color in the (ahref) part of the code, it does not take. The font slides to a different place on the page and becomes a link as well
How can I edit the font in the description area?

**jscheuer1** · 09-28-2010, 08:26 PM

In case I didn't mention it before:

Code:

<td id="desc" width="150" align="center" valign="top" >
<div id="desc" style="width:auto; height:100px; float: right;"> </div> </td>

That's asking for trouble. Pick one or the other. If you use the td, the div
will probably be overwritten, if you pick the div, the align and valign attributes of the td will not have a noticeable effect.

Once you choose one or the other, or if you already have, use css style, example:

Code:

<style type="text/css">
#desc {
	font-family: sans-serif;
	color: red;
	font-size 95%;
}
#desc a {
	font-family: sans-serif;
	color: blue;
	font-size 110%;
}
</style>

**arnaudpopi** · 09-29-2010, 12:32 PM

Hi John
I put the CSS code and its working. but I want to have title, subtitle and content with different font parameters - how can I do that? I did not understand what is the second part of the code saying "desc a" , how do I point to it?
Also when the page loads I want it to show up with the first picture and description already loaded, instead of being blank.

thank you very much, appreciate it.

**jscheuer1** · 09-29-2010, 01:43 PM

Originally Posted by arnaudpopi

Hi John
I put the CSS code and its working. but I want to have title, subtitle and content with different font parameters - how can I do that? I did not understand what is the second part of the code saying "desc a" , how do I point to it?

That's basic css. These - #desc and #desc a are know as selectors. The first selects for styling an element with the id of desc. The second selects for styling all a tags within that element.

Title and subtitle are not valid tags for use inside a td or div element, so you would have to use something else, perhaps even give it a class or id to style it. For more info on selectors, see:

http://www.blooberry.com/indexdot/cs.../selectors.htm

This all assumes that you are willing to put tags in the trigger links' title attribute, example:

Code:

<a href="bulb.gif" rel="enlargeimage" 
rev="targetdiv:loadarea,trigger:click,enabletitle:no" 
title="<h2>Title for This Description</h2>Some <a href='somepage.htm'>Description</a>">Thumbnail</a>

Notice that the a tag's href uses ' marks not " marks. This is required because the title attribute of the trigger uses " marks. If you were to add a class to the h2 tag, you would have to do the same thing:

Code:

<h2 class='dtitle'>Title for This Description</h2>

But, you now have an unsightly looking 'tooltip' when you hover over the trigger. Since you are using image thumbnails as the visual trigger though:

Code:

<a href="M_4.jpg" rel="enlargeimage" 
rev="targetdiv:loadarea,trigger:click,enabletitle:no" title="1">
<img title="" border="0" src="tmb_M_3.jpg" width="91" height="61" /></a>

You may give the thumbnail an empty title as highlighted above and this will cancel out the 'tooltip' creating effects of the trigger's title in most browsers. You may also give the thumbnail an actual title, and that will be shown as the 'tooltip'.

Originally Posted by arnaudpopi

Also when the page loads I want it to show up with the first picture and description already loaded, instead of being blank.

Just hard code whatever you want in those elements, it will get overwritten once a trigger is activated, example:

Code:

<div id="loadarea" style="width: 510px; height: 220px; float: left;">
<img alt="" src="whatever.jpg"></div>

Thread: Change positions of image description in image gallery

Thread Tools

Search Thread

Change positions of image description in image gallery

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions