Animated Div Collapse: problem using thumbnails and data-open/close image

[Ouroboros]

Script title: Animated Collapsible DIV v2.4

Script URL: http://www.dynamicdrive.com/dynamici...edcollapse.htm

Description: I have a row of thumbnail images that when clicked will show a larger image that is in a collapsible div. This works great, however I would like to apply a blue border around the thumbnail image. I am using the rel attribute in the href tag wrapped around the image to show the larger image in the collapsible div. The problem is that when I use the data-openimage & data-closeimage for the border effect onClick, the actual thumbnail disappears. I am using this approach because I want the border on click. For some reason I couldn't get the border-color of the image to toggle using the -toggle ID method, so now I feel like I'm out of luck, unless I create some complicated dual div situation where the border image is absolutely positioned over the actual thumbnail.

I hope this makes sense. Something tell me that there is an easier solution. Here's one of the images inside a div:

<div id="container"><a href="#" rel="expand[photo1]" class="preview" data-openimage="images/projects/thumb_on.gif" data-closedimage="images/projects/thumb_off.gif"><img src="images/projects/thumb1.jpg" alt="Click to see a larger view" width="27" height="17" border="0"></a></div>

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Ouroboros]

Ah sorry! Here's a link:http://wyrmouroboros.com/issues/

This page shows the first thumbnail with the data-openimage & data-closedimage. There's a preview hover effect on just that image now which isn't part of the problem (at least I hope not). I'm obviously trying to use the data-open/closed to obviously highlight the clicked thumbnail. I have tried to change the image border to another color via the -toggle method provided in your script but I need the border inside the image.

The other problem is something that I discussed with you before. On the categories nav on the left, I can't get the links to stick to both a color AND bold. For example if you click on Category 3 and then any subcategory, it changes to bold but not the color. I tried to change the class name as you suggested in another post but then what happened was that made it unresponsive to a repeat click (as well as not working as desired).

If you have the time to review this page, I GREATLY appreciate it and thank you again as I'm learning so much from this forum!

[ddadmin]

Actually at a glance the data-* attributes do seem to be working. You currently have this defined only in the first thumbnail image:

<a href="images/projects/thumb1a.jpg" rel="expand[photo1]" class="preview" data-openimage="images/projects/thumb_on.gif" data-closedimage="images/projects/thumb_off.gif">

Looking at thumb_on.gif and thumb_off.gif, they are simply a blank image, with the former having a border around it. That's how it appears on the page right now depending on whether the corresponding DIV is expanded or not.

If what you're trying to do is create a border effect around the thumbnail that's selected, then thumb_on.gif should just be the original thumbnail image itself, photoshopped to have a border around it, while thumb_off.gif would just be the original image itself (with no borders).

For issue #2, have you checked out this thread: http://www.dynamicdrive.com/forums/s...ad.php?t=48476

[Ouroboros]

Hey thanks again for the reply! I'll look at issue two but for the first issue, the desire was that I was hoping for a way somehow to add/remove a border around the thumbnails without a Photoshop approach (ie embedding the border inside the thumbnail). Right now with this script I'm envisioning something along the lines of having the data-* images appear on a different z-index overlay above the actual thumbnails. This seems excessive to me and it seems like there should be an easier solution. I tried to pass a parameter to change a css attribute on click as you mentioned to me here:

http://www.dynamicdrive.com/forums/s...t=48476&page=2

But this doesn't seem to work!

[ddadmin]

The ontoggle event should be able to do that- that is, apply a CSS border to the currrently selected toggler or thumbnail. Try something like:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	if ($('#'+divobj.id+"-thumbnail").length==1) //if toggler link exists
		$('#'+divobj.id+"-toggle").css('border', (state=='block')? '1px solid red' : '0 solid red')
}

Thia assumes that you've given each of the thumbnail image a unique ID attribute in the format "divid-thumbnail", for example:

<a href="#><img id="bob-thumbnail" /></a> <a href="#><img id="john-thumbnail" /></a>

Where "divid" is the ID of the DIV the thumbnail is expanding/ contracting.