On my page
http://www.likdancewear.com/component/virtuemart/3-heel/blanka-11-black-soft-pu-detail.html?Itemid=0
when you click a thumbnail, it pops up on the screen. Is it possible to have it just swap out the main image instead?
Greetings,
It will be around a 6 month late answer but her is my solution for J1.5 + Vm2 ;
components\com_virtuemart\views\productdetails\tmpl -> default.php
add
$('.additional-images .product-image').click(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
});
right after;
$document->addScriptDeclaration("
jQuery(document).ready(function($) {
and in default_images.php;
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>
to
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true); ?>
and
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>
to
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', false, 'class="modal"', true, true) . '</div>
and also if you want thumbnails seem to be clickable simply add
<a href="#">
behind the
<?php
// List all Images
and close "a" Tag after php.
thanks no_leaf it worked but the images have been made smaller for some reason
lol silly ha? :) I didn't check it until i saw your reply. I thought they were small because of the original images :)
Here is the fix i guess it worked;
First one main-image to:
echo $image->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true);
Second one additional-images to:
echo $image->displayMediaFull('class="product-image"', false, 'class="modal"', true, true);
hi, no_leaf,
It seems that VM 2.0.20b uses different codes. I can not find those strings you mentioned above.
Could you please check with VM v2.0.20b and work out a new method?
Thanks.
components\com_virtuemart\views\productdetails\tmpl -> default.php
add
$('.additional-images .product-image').click(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
$('.main-image a').attr('href',himg );
});
after
$('a.ask-a-question').click( function(){
$.facebox({
iframe: '" . $this->askquestion_url . "',
rev: 'iframe|550|550'
});
return false ;
});
and in default_images.php
change
<div class="additional-images">
<?php
for ($i = 1; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
<div class="floatleft">
<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
?>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
to
<div class="additional-images">
<?php
for ($i = 0; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
<div class="floatleft">
<?php
echo $image->displayMediaFull('class="product-image" style="cursor: pointer"',false,"");
?>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
But use template overrides...else with next update your changes will be lost
http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system
Can you help me please?
I've tried the code you suggest but it hasn't worked
I'm using virtuemart 2.0.20
I've added to default.php
QuotejQuery(document).ready(function($) {
$('a.ask-a-question').click( function(){
$.facebox({
iframe: '" . $this->askquestion_url . "',
rev: 'iframe|550|550'
});
return false ;
});
$('.additional-images .product-image').click(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
$('.main-image a').attr('href',himg );
});
I added the code below to default_addtocart.php
Quote
/* $('.additional-images a').mouseover(function() {
var himg = this.href ;
var extension=himg.substring(himg.lastIndexOf('.')+1);
if (extension =='png' || extension =='jpg' || extension =='gif') {
$('.main-image img').attr('src',himg );
}
console.log(extension)
});*/
});
");
Many Thanks for your help
the second code must be in default_images.php and not default_addtocart.php