Maximizing thumbnail directly on PRODUCTS LISTINGS page

Ovidoo

2008-11-04 17:54

Hello,

Is there a way to make the link for the thumbnail in the products listing directly expand to full view ? Instead of linking to FULL PRODUCT DESCRIPTION?

I tried editing the pages_default.tpl and messing with the <a href but i can't get it to work directly with that lightbox script.

Thanks in advance!

» Quick.Cart v3.x

beholder

2008-11-04 18:14

Hello, this is so easy to do:
Find block SUBPAGES_IMAGE_2 in templates/pages.tpl it looks like this:

<!-- BEGIN SUBPAGES_IMAGE_2 --><div class="photo"><a href="$aData[sLinkName]"><img src="$config[dir_files]$aDataImage[iSizeValue1]/$aDataImage[sFileName]" alt="$aDataImage[sFileDescription]" /></a></div><!-- END SUBPAGES_IMAGE_2 -->

Now delete this from the above block:

That should do the trick.

QC 3.x

beholder

2008-11-04 18:19

oh, I meant file templates/pages_default.tpl in the above instruction.

QC 3.x

kalanta

2008-11-04 18:25

try to change lines in file templates/pages_default.tpl from:

<!-- BEGIN PRODUCTS_IMAGE -->
<div class="photo"><a href="$aData[sLinkName]"><img src="$config[dir_files]$aDataImage[iSizeValue1]/$aDataImage[sFileName]" alt="$aDataImage[sFileDescription]" /></a></div>
<!-- END PRODUCTS_IMAGE -->

to:

<!-- BEGIN PRODUCTS_IMAGE -->
<div class="photo"><a href="$config[dir_files]$aDataImage[sFileName]" rel="lightbox-page" title="$aData[sDescription]"><img src="$config[dir_files]$aDataImage[iSizeValue1]/$aDataImage[sFileName]" alt="$aDataImage[sFileDescription]" /></a></div>
<!-- END PRODUCTS_IMAGE -->

Ovidoo

2008-11-04 19:52

That's great, works perfectly! thanks a lot beholder and kalanta !! Really grateful for the quick help!

Ovidoo

2008-11-04 20:07

Just a problem ..... now when i maximize a Thumnail, the Lightbox script automatically adds "Image 1 of 7" after the pic and it adds a "Next" button. I'm only having 1 picture/pic

kalanta

2008-11-04 21:18

You can edit a file core/litebox-1.0.js but it's not a professional solution. Jus change the code from (approx. 323-351 lines):

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}

myLightbox.updateNav();
},

updateNav: function() {

// if not first image in set, display prev image button
if(activeImage != 0){
Element.show('prevLink');
document.getElementById('prevLink').onclick = function() {
myLightbox.changeImage(activeImage - 1); return false;
}
}

// if not last image in set, display next image button
if(activeImage != (imageArray.length - 1)){
Element.show('nextLink');
document.getElementById('nextLink').onclick = function() {
myLightbox.changeImage(activeImage + 1); return false;
}
}

this.enableKeyboardNav();
},

to:

// if image is part of set display 'Image x of x'
if(imageArray.length > 100){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}

myLightbox.updateNav();
},

updateNav: function() {

// if not first image in set, display prev image button


// if not last image in set, display next image button


this.enableKeyboardNav();
},

This solution has an influence to all pictures. You will not see any navigation in lightbox. You can try to use different litebox js files for gallery, product detail page files etc.

beholder

2008-11-05 00:05

now this is what I call "community at work" helping each-other. This is great Kalanta, let's keep it up.

QC 3.x

Ovidoo

2008-11-07 13:40

Thanks a lot kalanta , that did the job :)