PDA

View Full Version : 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/dynamicindex4/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):



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

Yours is probably more like:


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


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

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


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


<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"><!--webbot bot="HTMLMarkup" startspan -->

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

<!--webbot bot="HTMLMarkup" endspan i-checksum="11986" --></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):



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:


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


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:


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


<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
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/css/syntax/selectors/selectors.htm

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


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


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


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


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:


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

arnaudpopi
09-30-2010, 08:56 PM
Hi John,
Thanks again, I tried different ways to fix it -eventually I got to this code. i can not get rid of the underlining of the word description. In addition it is only working in IE, not chrome,firefox or safari.
Any suggestions on how to fix these two issues?




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

<style type="text/css">
#desc {
font-family: pekan;
color: red;
font-size 400%;
}


#desc a {
font-family: pekan;
color: orange;
font-size 110%;
}
</style>



<link href="CSS_ronit.css" rel="stylesheet" type="text/css" />
</head>

<body style="background-color:#F6F7DD; direction:ltr; scrollbar-base-color: #877D74; scrollbar-arrow-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-face-color: #B0B78E; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF;">
<div id="apDiv1">
<table width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="50" align="center" valign="bottom" background="images/bg_top2.png" scope="col"><table width="820" height="43" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="378" height="43" scope="col">&nbsp;</th>
<th width="379" scope="col"><img src="images/logo.png" width="172" height="43" align="bottom" /></th>
<th width="63" scope="col">&nbsp;</th>
</tr>
</table></th>
</tr>
<tr>
<td height="380" align="center" valign="bottom" background="images/bg_main2.png"><table width="810" height="374" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th height="19" colspan="6" scope="col">&nbsp;</th>
</tr>
<tr>
<th width="4" height="302" scope="col">&nbsp;</th>
<th width="258" align="left" valign="middle" scope="col"><table width="258" height="300" border="0" align="left" cellpadding="0" cellspacing="0" bordercolor="#B0B78E">
<tr>
<th width="230" align="center" valign="middle" scope="col"><div id="loadarea" style="width:250px; height: 220px; float: right;"></div></th>
</tr>
</table></th>
<th width="5" align="left" valign="middle" scope="col">&nbsp;</th>
<th width="177" align="left" valign="middle" scope="col"><table width="170" height="300" border="0" align="left" cellpadding="1" cellspacing="0" bgcolor="#B0B78E">
<tr>
<th width="201" scope="col"><table width="170" height="300" border="0" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th width="157" scope="col"><div id="desc" style="width:165px; height:220px; float: inherit;"> </div></th>
</tr>
</table></th>
</tr>
</table></th>
<th width="354" align="left" valign="middle" scope="col"><table width="350" height="291" border="0" align="right" cellpadding="1" cellspacing="0" bgcolor="#B0B78E">
<tr>
<th width="349" height="291" scope="col"><table width="350" height="300" border="0" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th width="233" height="289" align="center" valign="middle" scope="col"><div style="overflow:auto; height: 285px; width: 200px; float: left; top: -50px;">
<table width="182" height="272" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<th width="100" height="61" align="left" valign="top" scope="col">






<a href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,enabletitle:no"
title="<h1>TEST</h1> Some <br> <a > Description</a>"


<a href="images\M_1.png" >
<img title="GO" border="0" src="images\tmb_M_1.jpg" width="91" height="61" /></a

jscheuer1
10-01-2010, 07:24 AM
Your HTML code here is invalid:



<a href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,enabletitle:no"
title="<h1>TEST</h1> Some <br> <a > Description</a>"


<a href="images\M_1.png" >
<img title="GO" border="0" src="images\tmb_M_1.jpg" width="91" height="61" /></a

Neither of the actual a tags (beginning of tags highlighted) are closed. It's impossible to know for sure what is intended. However, assuming that these are both links for the script, this seems most likely to me at the moment:


<a href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,enabletitle:no"
title="<h1>TEST</h1> Some <br> <a > Description</a>">Hi</a>


<a title="GO" href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,enabletitle:no">
<img border="0" src="images\tmb_M_1.jpg" width="91" height="61" />Go</a>

Now, once we do this, it works in both Firefox and IE and probably in those others you mentioned. The word Description in the above is not underlined when the script transfers it to the desc division.

If it were written with an href there in the title attribute of the trigger, it would be underlined when transferred:


<a href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,enabletitle:no"
title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>">Hi</a>

But that could be prevented by using this added style (highlighted):


<style type="text/css">
#desc {
font-family: pekan;
color: red;
font-size 400%;
}


#desc a {
font-family: pekan;
color: orange;
font-size 110%;
text-decoration: none;
}
</style>