Album: Setting style for current image's thumbnail

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
mfal55
Forum Members
Forum Members
Posts: 131
Joined: Fri Jan 09, 2009 10:00 pm

Album: Setting style for current image's thumbnail

Post by mfal55 »

Hi all -
I have an image gallery set up with album.  It consists of a row of small thumbnails and a larger image. Clicking each thumbnail changes the large image (all on one page).  Works great.  Is there a way I can have the thumbnail of the current image display differently - for example, a border around the image - to designate that's the image you're looking at?  Kind of like how we can establish a 'current' link status in Menu?  Here is the code for the working album - just don't know how to implement the 'current image' element.  Thanks in advance for anyone's help!

Code for large photo:

Code: Select all

<div class="boxgrid captionfull">
<img src="{$picture->picture}" alt="{$picture->name|escape:'html'}" title="{$picture->name|escape:'html'}" />
<div class="cover boxcaption">{$picture->name}{if $picture->comment}: {$picture->comment}{/if}</div>	
</div>
Code for thumbnails:

Code: Select all

<table>	
{foreach from=$pictures item=picturesrow}
<tr style="vertical-align:middle">
{foreach from=$picturesrow item=onepicture}
<td style="text-align:center">
<a href="{$onepicture->link}" style="border: 0;"><img src="{$onepicture->thumbnail}" alt="{$onepicture->thumbnail}" style="border: 0; height: 44px;" /></a>
</td>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
</tr>
{/foreach}
</table>
I've also posted an image to demonstrate.  Thanks!!
http://img269.imageshack.us/img269/7650 ... timage.jpg
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Album: Setting style for current image's thumbnail

Post by Dr.CSS »

A link to the page is most times better for this type of question as we could see it in action and tell if the template your using allows or has any settings for active image, I've made many Album templates and some do allow ofr or have an active image class...
mfal55
Forum Members
Forum Members
Posts: 131
Joined: Fri Jan 09, 2009 10:00 pm

Re: Album: Setting style for current image's thumbnail

Post by mfal55 »

Hi Mark -
Great! Thanks for your reply.  You can view the page here: http://tinyurl.com/m6ma8l.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Album: Setting style for current image's thumbnail

Post by Dr.CSS »

What you are using has no setting or call for active thumb image, also using tables may be making your page refresh every time you hit another thumb to change main image...
mfal55
Forum Members
Forum Members
Posts: 131
Joined: Fri Jan 09, 2009 10:00 pm

Re: Album: Setting style for current image's thumbnail

Post by mfal55 »

Thanks for your reply Mark!  What would you suggest I use to achieve the results I'm going for?  Thanks again for your assistance! :)
mfal55
Forum Members
Forum Members
Posts: 131
Joined: Fri Jan 09, 2009 10:00 pm

Re: Album: Setting style for current image's thumbnail

Post by mfal55 »

mark wrote: What you are using has no setting or call for active thumb image, also using tables may be making your page refresh every time you hit another thumb to change main image...
Hi Mark -
Could you point me to a template that uses the image marker like I'm looking for?  Also, to prevent the page from refreshing should I use divs and not tables?  I hadn't coded the original site, so I was just fitting the current code to the cms, but I will change it if it prevents this.  Please advise when you have a moment.  Thanks!! :)
Post Reply

Return to “Layout and Design (CSS & HTML)”