Author Topic: 3 image sizes (Medium Image on Flypage with Lightbox to full image)  (Read 5252 times)

reni

  • Beginner
  • *
  • Posts: 14
I've heard a lot of people asking for 3 image sizes. Eg a small thumb image for the browse page, a medium image for the flypage and a large image to open in the lightbox.

Here is my workaround.

1) Leave the browse page as normal, using the built in thumb functionality.
2)Edit your flypage (usually components/com_virtuemart/themes/default/templates/product_details/flypage.tpl.php)

Change

Code: [Select]
<?php echo $product_image ?><br/><br/><?php echo $this->vmlistAdditionalImages$product_id$images ?>
to

Code: [Select]
<a rel="lightbox[<?php $product_id ?>]" title="<?php echo $product_name ?>" href="http://yoursite.com/components/com_virtuemart/show_image_in_imgtag.php?filename=<?php echo $product_full_image ?>">

<img class="vmdetailsimg" border="0" alt="Hand Crafted bowl" src="http://yoursite.com/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>"/><br/>View Full-Size Image</a>

3. Edit your theme css file (usually components/com_virtuemart/themes/default/theme.css)

Add this code to the end of theme.css

Code: [Select]
.vmdetailsimg, .vmdetailsimg img {
max-width: 300px;
}

4. You now have a small image on your browse page, a medium image on your flypage and a large image that will open in a lightbox when the medium image is clicked.

Notes
  • Make sure you change the max-width of 300px (in the code for your theme.css file) to your preferred maximum width for the medium image on your flypage.
  • Make sure you change 'yoursite.com' (in the code for the flypage) to the url of the your website
  • Note that the full image is being loaded on the flypage (even though it appears resized) so try keeping image uploads to not more than 150KB.
  • If you feel that the image opened in the lightbox is still to large than use the below code for the flypage (instead of the above code)(the code for the theme.css file remains the same) and change 'newxsize=500' and 'newysize=500' to your preferred maximum width/height.

Code: [Select]
<a rel="lightbox[<?php $product_id ?>]" title="<?php echo $product_name ?>" href="http://yoursite.com/components/com_virtuemart/show_image_in_imgtag.php?filename=<?php echo $product_full_image ?>&amp;newxsize=500&amp;newysize=500&amp;fileout=">

<img class="vmdetailsimg" border="0" alt="Hand Crafted bowl" src="http://yoursite.com/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>"/><br/>View Full-Size Image</a>

no64

  • Beginner
  • *
  • Posts: 33
Re: 3 image sizes (Medium Image on Flypage with Lightbox to full image)
« Reply #1 on: October 15, 2009, 19:25:57 pm »
hmm, .... can't be the right way to hardcode any "image paths" into the template...

no64

  • Beginner
  • *
  • Posts: 33
Re: 3 image sizes (Medium Image on Flypage with Lightbox to full image)
« Reply #2 on: October 15, 2009, 19:28:26 pm »
... besides that, I think everybody needs this feature - it have to be an "offical" tutorial somewhere to make this possible.

Please, VirtualMart people, how can this be made?

BabyNatura

  • Beginner
  • *
  • Posts: 7
Re: 3 image sizes (Medium Image on Flypage with Lightbox to full image)
« Reply #3 on: January 18, 2010, 23:33:59 pm »
Here's how they did it in VM 1.0.x

http://forum.virtuemart.net/index.php?topic=19744.0

Maybe you can get some information out of that...
Kind regards,

BN

Manduca | Wollen Voetenzak

kaftanka

  • Beginner
  • *
  • Posts: 9
Re: 3 image sizes (Medium Image on Flypage with Lightbox to full image)
« Reply #4 on: January 19, 2010, 23:52:29 pm »
reni....this is very interesting information !
Would it be possible for you to provide a URL to see how this is working ?

Thanks