VM2 Slideshow on product details page. Free!

[Linelab]

VM2 Linelab Slideshow is new way of displaying images and image descriptions. This jQuery Slideshow is cross browser compatible and bug free.

Virtuemart 3 compatible.
Joomla 3.x compatible.

Demo: http://www.linelabox.com/linelabox/?template_layout=6c75971a28ed7a6f409b4a532f41bd3f
Download: http://www.linelabox.com/joomla-modules/linelab-archive/category/2-free-joomla-extensions

How to Install: Download vm2_product_slideshow.zip > unzip and upload via FTP to folder of your default Joomla 2.5 template. Done!
To decrease the width of the slideshow open assets/css/pikachoose/base.css
Edit Line 4:

Code Select Expand

.pikachoose {width: 520px; margin: 0 auto;}
.pika-stage, .pika-textnav {width: 500px;}
Happy downloading 

Any comments would be appreciated.

[jjk]

Any comments would be appreciated.

I just tried it on my new VM2 gallery site (not live yet) and it works with my slightly customized template, but I wonder if you need to include the fancybox.js, because that one is already included in VM2 and used for the backend media manager. (BTW - for some reason the slideshow seems to have frozen my Firefox browser window while I was away from my computer for about half an hour)

Personally I would be more interested in a sliding caption integrated into the lightweight VM2 facebox like this one: http://css-tricks.com/slide-in-image-captions/

...but if my time permits, I might add a more detailed comment on Monday (have to leave now).

[Linelab]

Hi Jjk, Image slider doesn't work with default fancybox.js.

[jjk]

Hi again,

if I would use the Slideshow (I'm happy with a lightbox only), I would try to keep the fancybox navigation arrows inside the image by default (similar to VM2 backend media list), because otherwise they require extra space in the product details view, which many users might not have in that view due to the layout and therefore images might be scaled down. Also, I would disable the text 'Previous/Next' buttons because I think one navigation method is sufficient and they take away space, too. Next I would try to open the image directly into the lightbox when one of the thumbs are clicked. Compared to a pure fancybox override (without slideshow), the user has to click a thumbnail twice instead of once to open an image in the lightbox.

However, I suppose these things are a matter of taste and many others will be happy with how it works now.

[webiedesign]

Very nice ! Thanks for your contribution(s) to Virtuemart 2.
Any advice on adding this to the category page ?

[ciriman]

i tryed to use the solution in your link, but i don't want the slideshow in a page but only the "next prev" buttons in image popup! i can't resolve this.. you can find a solution whit this script?

[Linelab]

Hi Ciriman,  Good idea.  We will create a POPUP Slideshow including thumbnails (additional images) as soon as possible. Thanks for your patience.   

[ciriman]

Hi Ciriman,  Good idea.  We will create a POPUP Slideshow including thumbnails (additional images) as soon as possible. Thanks for your patience.   

would need only to perform as in the previous version of VM. at the click of a thumb I can go to the next or previous image extra of the main item. (main picture included). I hope you can answer soon, thanks for your dedication and patience.

[www.vn-boom.com]

Thank you! I realy use it and use it for all my website

Thank!

[nicklucas]

Hi, can I just confirm where to upload the various files?

For assets:

yourdomain/components/com_virtuemart/assets (and then in the relevant folders)

For html:

yourdomain/templates/"templatesetasdefault"/html/com_virtuemart/productdetails

As I have done this but it does not work, have I done something wrong?

Many thanks,

Nick

[ciriman]

unzip and upload via FTP to folder of your default Joomla 2.5 template

[nicklucas]

I did that as well but it still didn't work, i.e:

yourdomain/templates/thedefault/

[nicklucas]

ok, so the plot thickens, it works on the standard atomic joomla template but not the template I use from Gavickpro, any suggestions??

[maxdeal]

Hi,

Demo looks nice. This is something I realy want to use.

I have copied all files into the given folders, but all I get is all pictures in large size. I can click each image. Then I see the image alone with white background.

Can anyone help me?

Maxdeal

[nicklucas]

I really want to use this on my template however the template that I am using has a default.php file in the com_virtuemart folder that clearly contains code to either override the default_images.php folder for this slideshow. Here is the code relating to product images from the default.php file:

<div class="width40 floatleft">
<?php // Product Main Image
if (!empty($this->product->images[0])) { ?>
<div class="main-image">
<?php echo str_replace('<a', '<a class="modal"', $this->product->images[0]->displayMediaFull('class="product-image"',true,"class='modal'",true)); ?>
</div>
<?php } // Product Main Image END ?>
<?php // Showing The Additional Images
if (!empty($this->product->images) and count ($this->product->images)>1) { ?>
<div class="additional-images">
<?php // List all Images
foreach ($this->product->images as $image) {
echo '<div class="product-thumb">' . $image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true) . '</div>'; //'class="modal"'
} ?>
</div>
<?php } // Showing The Additional Images END ?>

Does anyone know how to sort this out?!