Making PGlightbox popup thumbnail script more search engine friendly?

Hi there,

My PGlightbox theme version has popup image thumbnail feature which can be enabled when the right/lefthand side of the image is rolled over. Unfortunately the way they are implemented I can't use the popup thumbs because it has a detrimental effect on image search. When the popup thumbs are turned on the code actually turns the image into a background image, which google can't index. I was wondering if there is a way to change the code so that the javascript doesn't hide the image in the background but keeps it on the page so it can be indexed?

Gallery version = 2.2-svn core 1.1.16
PHP version = 5.2.13 apache2handler
Toolkits = LinkItemToolkit, Thumbnail, Gd, ImageMagick
Acceleration = full/86400, full/86400
Default theme = PGlightbox

Hi Supr,

I tried the script you posted and I wasn't sure where it should all go. I put the <style> tags in my theme.css file as putting into the header of theme.tpl caused an error. I loaded the jquery script in the header of theme.tpl...no problem there. However, when I added the actual rollover script I get a fatal error:

Fatal error: Smarty error: [in gallery:themes/PGlightbox/templates/theme.tpl line 49]: syntax error: unrecognized tag: $(document).on('mouseenter', '#gsImageView > a', function(){ $('.icon').fadeToggle('fast'); (Smarty_Compiler.class.php, line 439) in /public_html/gallery2/lib/smarty/Smarty.class.php on line 1095

I'm not sure how to resolve smarty unrecognized tag errors...do I have to define the tag in Smarty_Compiler.class.php or Smarty.class.php?

Thanks for your help!

we are styling div id="gsImageView"
and looking for block-core-Navigator links
I don't know if your theme uses thos elements.
If you supply a link to your gallery, I can adjust the script.

-s
All New jQuery Minislideshow for G2/G3

try:

            var left = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAABqklEQVRYhcXXS46jMBCAYR9kFiMgBgPmEYzAwQ4VErHmxj6Cj9DLHKAPULOY9iitJlGrMzEl/dvSJ6/KhDwx8zwn8zznz+x4egAgmabperlcYEsEnE4nM00Tns/nZTMEABgAwI/8QwAAxnE04ziiyztEKQVaa3M8HvE2rbU/iENorXElPxClFCiljFIK1/ICUUrBMAxmGAa8l5TytZC+70FKaQ6HAz7qpRApZSKlvEop8RtdpZRvP63rul93X6Lve9P3PXrq9yqi6zrTdR366gtECAFt25q2bdFnnyBCCBBCGCEE+u4fxCGapsEtqqrqL6RpmqVpGrs5xGHqurb7/R599wlCCCFVVS11Xdu6rtFnXyAOU5alLcsSfbUKIYQQzvlSFIUtigJ9dBdyi+Gc46t7CHGYPM9tnuf4KM75688AxtiSZZnNsgzvxRjzcxgxxpY0TW2apriWN4jDMMYsYwxX8ns8U0qXOI5tkiR4G6XU/3fCYeI4RtcmEIehlFpKKX60DYQQQsIwXHa7nY2iCMMw3A5CCCFBEKgoit6jKIJNIQ4TBIH4H7v+AK3T3o1H8lOwAAAAAElFTkSuQmCC';
            var right = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAB4ElEQVRYhcXUyY7TQBCA4TpwYOfKjpI4dryvnXZ77bSjSLnzGLwHDJkZH4HZXoBDP8I8Co/BsbiQKDCegJRMu6T/WvoOpQLYc5qmeb/vjoNM0zTXQoi2bwcIIaQQAoUQp/P5/FlvEM655Jwj5xxns9npcrl82gukrmtZ1zVudUIpVY+p61pWVYXblWV5kuf5E6WQsixlWZb4d1VVHSvFFEUhi6LAWzrmnD9WBsnzHHe0UoLJskxmWYa7yvN8tVgsHu1cxBhbMcZ+7NFPxhj+R7ufHqW0TdMUVUQp/RzH8cNbIZRSVFWapkedGEJISwhBlU2n0yPG2IMbkCRJUHWEkE+c8/sbSJIkbRzH2FMfN5goivqEfCGEPN9AoijCHvq6QQAABEHQhmGIKguC4Fscxy/+OFbP81rf91FhNxFriOd5qKizMAxfdj4013Vb13VRQWe+77/qRBxiHMeRjuPgPzq/U8QaYts27ujc87zXd4oAALAsS1qWhV3Ztn2hBAEAYJqmNE0TO7pwHOeNEgQAgGEYcjKZ4HamaV4qRawhhmHgVpe2bb9VigAA0HVd6rqOuq6jYRhXw+FQPQIAQNM0qWkajsfjq8Fg8K4XxG/ItaZp3znn93pDAACMRqMPh0D8ApCV3bgU7e+YAAAAAElFTkSuQmCC';
            
            $(document).ready(function(){
                /* Bind some events */
                $(document).on('mouseenter', '.gsSingleImageNoF', function(){
                    $('.icon').fadeToggle('fast');
                }).on('mouseleave', '.gsSingleImageNoF', function(){
                    $('.icon').fadeToggle('fast');
                }).on('click', 'span.left', function(e){
                    e.preventDefault();
                    location.href = $('.iconPrev').attr('href');
                }).on('click', 'span.right', function(e){
                    e.preventDefault();
                    location.href = $('.iconNext').attr('href');
                });
                if($('.iconPrev').length > 0){
                    $('.gsSingleImageNoF').append('<span class="icon left"><img src="'+left+'" /></span>');
                }
                if($('.iconNext').length > 0){
                    $('.gsSingleImageNoF').append('<span class="icon right"><img src="'+right+'" /></span>');
                }
                
            });

your page already has an icon class, so if they clash you will have to change any reference to icon in my css/script to something else like icons or arrow or something

-s
All New jQuery Minislideshow for G2/G3

you're missing a </script> tag

<script type="text/javascript" src="/gallery2/themes/PGlightbox/theme.js">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

should read

<script type="text/javascript" src="/gallery2/themes/PGlightbox/theme.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

-s
All New jQuery Minislideshow for G2/G3

I see that when you roll over the image that the PHLightbox nav buttons also appear...I think this is a CSS error, perhaps what you said before about renaming the 'icon' class. I have to disable it for now and will try editing rhe CSS and let you know how it works

THis is what I have so far in the header of theme.tpl:

{literal}<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
var left = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAABqklEQVRYhcXXS46jMBCAYR9kFiMgBgPmEYzAwQ4VErHmxj6Cj9DLHKAPULOY9iitJlGrMzEl/dvSJ6/KhDwx8zwn8zznz+x4egAgmabperlcYEsEnE4nM00Tns/nZTMEABgAwI/8QwAAxnE04ziiyztEKQVaa3M8HvE2rbU/iENorXElPxClFCiljFIK1/ICUUrBMAxmGAa8l5TytZC+70FKaQ6HAz7qpRApZSKlvEop8RtdpZRvP63rul93X6Lve9P3PXrq9yqi6zrTdR366gtECAFt25q2bdFnnyBCCBBCGCEE+u4fxCGapsEtqqrqL6RpmqVpGrs5xGHqurb7/R599wlCCCFVVS11Xdu6rtFnXyAOU5alLcsSfbUKIYQQzvlSFIUtigJ9dBdyi+Gc46t7CHGYPM9tnuf4KM75688AxtiSZZnNsgzvxRjzcxgxxpY0TW2apriWN4jDMMYsYwxX8ns8U0qXOI5tkiR4G6XU/3fCYeI4RtcmEIehlFpKKX60DYQQQsIwXHa7nY2iCMMw3A5CCCFBEKgoit6jKIJNIQ4TBIH4H7v+AK3T3o1H8lOwAAAAAElFTkSuQmCC';
var right = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAB4ElEQVRYhcXUyY7TQBCA4TpwYOfKjpI4dryvnXZ77bSjSLnzGLwHDJkZH4HZXoBDP8I8Co/BsbiQKDCegJRMu6T/WvoOpQLYc5qmeb/vjoNM0zTXQoi2bwcIIaQQAoUQp/P5/FlvEM655Jwj5xxns9npcrl82gukrmtZ1zVudUIpVY+p61pWVYXblWV5kuf5E6WQsixlWZb4d1VVHSvFFEUhi6LAWzrmnD9WBsnzHHe0UoLJskxmWYa7yvN8tVgsHu1cxBhbMcZ+7NFPxhj+R7ufHqW0TdMUVUQp/RzH8cNbIZRSVFWapkedGEJISwhBlU2n0yPG2IMbkCRJUHWEkE+c8/sbSJIkbRzH2FMfN5goivqEfCGEPN9AoijCHvq6QQAABEHQhmGIKguC4Fscxy/+OFbP81rf91FhNxFriOd5qKizMAxfdj4013Vb13VRQWe+77/qRBxiHMeRjuPgPzq/U8QaYts27ujc87zXd4oAALAsS1qWhV3Ztn2hBAEAYJqmNE0TO7pwHOeNEgQAgGEYcjKZ4HamaV4qRawhhmHgVpe2bb9VigAA0HVd6rqOuq6jYRhXw+FQPQIAQNM0qWkajsfjq8Fg8K4XxG/ItaZp3znn93pDAACMRqMPh0D8ApCV3bgU7e+YAAAAAElFTkSuQmCC';

$(document).ready(function(){
/* Bind some events */
$(document).on('mouseenter', '.gsSingleImageNoF', function(){
$('.icon').fadeToggle('fast');
}).on('mouseleave', '.gsSingleImageNoF', function(){
$('.icon').fadeToggle('fast');
}).on('click', 'span.left', function(e){
e.preventDefault();
location.href = $('.iconPrev').attr('href');
}).on('click', 'span.right', function(e){
e.preventDefault();
location.href = $('.iconNext').attr('href');
});
if($('.iconPrev').length > 0){
$('.gsSingleImageNoF').append('<span class="icon left"><img src="'+left+'" /></span>');
}
if($('.iconNext').length > 0){
$('.gsSingleImageNoF').append('<span class="icon right"><img src="'+right+'" /></span>');
}

});
</script>
{/literal}

This is the css in theme.css:

#gsImageView > a {
display: inline-block;
position:relative;
}
.iconz {
z-index:9999;
display:none;
border: 1px solid #999;
background-color: rgba(255, 255, 255, .4);
border-radius: 17px 16px;
}
.left {
position:absolute;
top:47%;
left:0;
}
.right {
position:absolute;
top:47%;
right:0;
}
.gsSingleImageNoF {
position:relative;
}

I renamed icons to iconz in the css just to be safe. I wasn't sure if I needed to change it in the js as well so I tried it with an without. Either way the script isn't quite functioning...the arrows appear fixed on either side of the image (no fade in) and when you click on them it moves to the next image. The arrows are a dark grey with no circle around them this time. OR the arrows appear when cursor is not over the image, and when the cursor is over the image the icons disappear as well as the "next image" and "previous image" links I use below. That would indicate that "icon" is used elsewhere in the css for those nav links. I don;t understand why the script doesn't function when I do change the css to icons though. Should the css and the js match? Also, what I am going for is having the arrows on the left/right of the image (not over the image), and they can change color on rollover. That way people realize immediately that there are nav arrows there without having to rollover the image. Is it possible to define the left/right half of the image plus some extra space over the background so anywhere they rollover near the left or right side the icons light up? Thanks!

When I change icon left/right to iconz left/right something else happens...the arrows don't appear at all anymore and the image is not clickable. When I roll over the image the nav links below the image disappear

Great that is working now thanks! I was wondering if a fews mods are possible though...
1) To make the entire right/left side of the image clickable? Right now the arrows appear when you rollover the right/left side but you have to actually click on the arrow to move forward/back
2) To offset the arrows outside of the image, rather than over the image?
3) To leave the arrows always visible to the right/left of the image and just make them change color or something when the right/left of the image is rolled over (as in the example link I posted at top)
4) To use different icons for the arrows? I'm not sure how these are being rendered...the long encrypted code after "var left ="?

Thanks again for your help. I hope this helps others too who might want the same feature

Wow never heard of a data to URI conversion, very interesting I'll try it. I first tried copying his script and using that, but seeing that I didn't understand half of what was going on it didn't work. Maybe now I'll understand it better. Which portion of the css do I edit to make a larger area clickable, this?:

.left {
position: absolute;
top: 47%;
left: 0;
}
.right {
position: absolute;
top: 47%;
right: 0;

This puts the arrows at the top left/right corners of the browser window

I thought I did...but I repasted it in and made sure to remove the extra spacing and it works fine now. Before there was a white semi-transparent circle around the icon, now it's gone...which is better.
The clickable portion of the image is better now....if they click anywhere on the left or right half of the image it moves back and forth, which is more intuitive. If you look on the site I changed the icons to white arrows as I think it shows better. I made them at 60% opacity in Photoshop but the transparency isn't coming through to the icons. Is the opacity of the icon handled by the CSS?

I disagree. The current way indicates that the option to go both directions is available.

Could be, but its not.

.iconz > img {
    opacity: .5;
}

http://www.w3schools.com/cssref/css3_pr_opacity.asp

-s
All New jQuery Minislideshow for G2/G3

It's working...emptied the cache and restarted again and opacity is now 50% ;-)

top: 47%; worked well with my shorter arrows, you may want to adjust to get a better center.

-s
All New jQuery Minislideshow for G2/G3

In testing the pages with Google Page Speed I would also recommend the following:

1) Switch to the minifed version of jquery, it's 32kb vs. 132kb:

2) Load the script at the end of the page, not at the top

Thanks!