Swap - swap main image AND thumbnail Will Pay

ronniestamps · Post by **ronniestamps** » 01 Dec 2010, 01:35

Using the swap image setting, I've styled the gallery like this: http://stilifecreative.com/index.php?op ... id=4:print

I would like all thumbnails to be a gray box using either an image I have created or css #CCCCCC until you hover over it and it reveals the actual thumbnail and stays that way unless the page is reloaded or revisited... starting with all gray boxes again.

I've approached this using javascript and css with no luck. I have experience in both but am not an expert. I believe the issue that I am running into is that the thumbnails do not have a unique id that is generated within the image tags. I also think I may be over thinking this task. Any insight would be absolutely awesome.

Thank you in advance.

Joomla - 1.5.20
Phoca Gallery - 2.7.5

Post by **Jan** » 01 Dec 2010, 20:57

Hi, no experiences, really no idea if this can be only by CSS, I think for this you need to use some javascript

Jan

ronniestamps · Post by **ronniestamps** » 02 Dec 2010, 21:14

I'm 99% positive it CAN NOT be done with css, as the thumbnails are created by dumping an array into the jhtml image function. I am OK with using Javascript for this function. I've gotten really close, but need expert advice/help. My mention of css was only to show what I've tried so far.

Thank you for your input, any more would be greatly appreciated.

TIA - Ronnie

ronniestamps · Post by **ronniestamps** » 04 Dec 2010, 21:01

@Jan - More than happy to make a more than minimum donation if you can solve this for me.

Post by **Jan** » 06 Dec 2010, 23:49

Hi, will be great but I have really no experiences with such feature and in fact I am not javascript expert

for me this is the same problem like for you

ronniestamps · Post by **ronniestamps** » 07 Dec 2010, 03:29

Anyone else? Willing to pay.

ronniestamps · Post by **ronniestamps** » 07 Dec 2010, 06:17

Figured it out, will post code later.

Post by **Jan** » 07 Dec 2010, 12:30

ronniestamps · Post by **ronniestamps** » 10 Dec 2010, 20:40

For swap image setting only. Should work in other situations but you would need to place the following code in different areas.

Open file components/com_phocagallery/views/category/tmpl/default.php

Each dynamically created thumbnail needs a unique name so the javascript knows which thumbnail is being hovered over. So...

declare a variable and assign it a value of 0:

Code: Select all

$imgids=0;

add your javascript to the code that generates the thumbnails:

Code: Select all

onMouseOut="document.a'.$imgids.'.src=\'http://stilifecreative.com/images/clear_thumb.gif\';"

so that the entire echo command looks like:

Code: Select all

echo ' onmouseover="PhocaGallerySwitchImage(\'PhocaGalleryobjectPicture\', \''. $switchImg.'\');displayDescription(\''.$value->description .'\');" onMouseOut="document.a'.$imgids.'.src=\'http://stilifecreative.com/images/clear_thumb.gif\';"';

this variable needs to auto-increment so add the following code on the line above the echo command you just modified:

Code: Select all

$imgids++;

Needs to be after

Code: Select all

else {

and before the echo command above.

add this line:

Code: Select all

echo '<img name="a'.$imgids.'" src="http://stilifecreative.com/images/grey_thumb.gif" class="pg-img-ovr1" />';

after this line:

Code: Select all

echo JHTML::_( 'image.site', $value->linkthumbnailpath, '', '', '', $value->altvalue);

fyi: clear_thumb.gif and grey_thumb.gif are the images I am using for the swap.

Hope this helps someone out in the future.

Post by **Jan** » 12 Dec 2010, 00:39

Great, thank you for this guide.

Jan

Phoca Forum