This thread discusses the Content article: LightBox + More images - IMPROVED

hello!
sorry for my english....

this is my modification in flypage template:

"<a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0" /></a><img name="product_image" alt='{product_name}' src="{full_image}" height="1" border="0" rel="lightbox[]" style="display:none;"/>"
(instead of "{more_images}" )

my idea of adding style display:none in a little copy of image and put real image inside tag <a>
now you can see the classical pointer as normal link on the page

demo page on my site at
http://www.flavourart.com/index.php?page=shop.product_details&flypage=shop.flypage&product_id=41&category_id=9&manufacturer_id=0&option=com_virtuemart&Itemid=33&lang=en



ciao

OK. But then the mod wouldn't work!!!!

It needs the format <a href...... ></a><img src=.........>

Nor would more images which displays the extra images!!!

As style tags are present just use this in your css file to display the pointer for more images

img.vm_more_image {
cursor: pointer;
}

and change your image clause in your flypage so that you have

a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"></a>
<img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0" style="cursor: pointer;"/>

Much simpler and quicker. This has been discussed on the forums!

ok

i'll try "style="cursor: pointer;" , it's better
thanx
ciao

Hello.

Because the full images can increase the site size i changed a little bit your code. Instead of loading full image and make them scaled, i replaced them with their thumbnails.

3 things should be done:

1. replace in "shop.product_details.php", everything after: <</* MORE IMAGES ??? */>> and before: <</* Files? */>>


$more_images = "";
$tproduct_name = $product_name;
$zoom_image = $imageurl;
// Zoom image
$zoom_image1 = $zoom_image;
$ttitle = @$title;
if( !empty($images->images) ) {
$href = $full_image;
$js = " onClick="javascript: document.product_image.src=this.src;
;document.product_image.onclick = function() { Lightbox.show('$href','$product_name','lightbox[]') };"
";
$dbi = new ps_DB();
$tproduct_name = $product_name;

$ttitle = @$title;
$more_images .= "<img class="vm_more_image" src="components/com_virtuemart/shop_image/product/$product_thumb_image" alt="$ttitle" title="$ttitle" rel="lightbox[]"";
$more_images .= $js;
$more_images .= ">";
// Let's have a look whether the product has more images.
$dbi->query( "SELECT * FROM #__{vm}_product_files WHERE file_product_id='$product_id' AND file_is_image='1'" );
$images = $dbi->record;
$i = 2;
foreach( $images as $image ) {
$info = pathinfo( $image->file_name );
$href = $image->file_url;
$fullimg = $db->f("file_name");
$info = pathinfo( $image->file_name );
$thumb = "components/com_virtuemart/shop_image/product/resized/". basename($href,".".$info["extension"])."_".PSHOP_IMG_WIDTH."x".PSHOP_IMG_HEIGHT.".".$info["extension"];
$thumburl = str_replace( $mosConfig_absolute_path, $mosConfig_live_site, $thumb );
$title = $image->file_title." ".$i++;
$more_images .= "<img class="vm_more_image" src="$thumb" alt="$title" title="$title" rel="lightbox[]"";
$more_images .= " onClick="javascript: document.product_image.src=this.src;
;document.product_image.onclick = function() { Lightbox.show('$href','$title','lightbox[]') };"
";
//$more_images .= ";"";
$more_images .= "><a href="$href" id="product_image_link" alt="$title" title="$title" rel="lightbox[]"></a>";
}
}
$mainframe->addCustomHeadTag('<script language="JavaScript" type="text/javascript" src="'.$mosConfig_live_site .'/components/com_virtuemart/js/mootools/mootools.v1.00.js"></script>');
$mainframe->addCustomHeadTag('<script language="JavaScript" type="text/javascript" src="'.$mosConfig_live_site .'/components/com_virtuemart/js/mootools/mooPrompt.js"></script>');
$mainframe->addCustomHeadTag('<script language="JavaScript" type="text/javascript" src="'.$mosConfig_live_site .'/components/com_virtuemart/js/slimbox/js/slimbox.js"></script>');
$mainframe->addCustomHeadTag('<link type="text/css" rel="stylesheet" media="screen, projection" href="'.$mosConfig_live_site .'/components/com_virtuemart/js/mootools/mooPrompt.css" />');
$mainframe->addCustomHeadTag('<link type="text/css" rel="stylesheet" media="screen, projection" href="'.$mosConfig_live_site .'/components/com_virtuemart/js/slimbox/css/slimbox.css" />');



2. in "flypage.php" instead of using {product_image} in your flypage use this code (is different from the code found in this page because is calling the thumbnail image, not the full image size):


<a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"></a><img style="cursorointer;" name="product_image" alt='{product_name}' src="components/com_virtuemart/shop_image/product/{product_thumb_image}" width="130" border="0" rel="lightbox[]"/>


3. the flypage doesn't know what is {product_thumb_image} and for that we have to add one more line to "shop.product_details.php". After the line:

$template = str_replace( "{full_image}", $full_image, $template ); // to display the full image on flypage


add this code:


$template = str_replace( "{product_thumb_image}", $product_thumb_image, $template ); // to display the thumb image on flypage


this thing is also present in VM 1.1, where lightbox is in the core of virtuemart. in my opinion the source of the thumbnails should be the real image thumbs, not the full images scaled.

best regards,
razvan

Looks great!
Exactly what I would like to have on my client's page. Unfortunately this board seems to have messed up your code! All backslashes inside strings with html are removed, and some other faults have come up so that if you have more images, the javascript to load them as main image doesn't work (after I've commentad out html quotes in strings)!

Hi,

Which one exactly is the code you said is formated? Excep the : P which is formated as an emoticon i don't see other one.

Razvan

Hi!
That was a quick reply!
The code which causes parse errors in php is the big chunk to put in "shop.product_details.php".

You are right.

See the atachment. this should work perfect now.
Please be carefull and take only the code i specified before in this post, because there can be other hacks that could mess up things. And please let me know if everything allright.

Best regards,
R

By the way, you can see the thumb working hack here lenjerie intima.

Thank you very much!

After copying the apropriate piece of code from the attached file it works exactly as it should!!

I recommend this hack to everybody using slimbox - not only the page loads a little faster, but the original thumbnails look much better than the downscaled big images. Very nice!

Stan

Hello Mark,
First of all, thank for your hacks.
I am currently installing Lightbox + More Image and I need to have a bigger picture when we click on more image so that customer can have a detailed view of the product.
Is that possible ? Which file should I modify ?

Thanks.
Olivier