making thumbnails replace main image

[spyderwebdesign]

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?

[no_leaf]

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

Code Select Expand

$('.additional-images .product-image').click(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
});

right after;

Code Select Expand

$document->addScriptDeclaration("
jQuery(document).ready(function($) {

and in default_images.php;

Code Select Expand

<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>
to

Code Select Expand

<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true); ?>
and

Code Select Expand

echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>
to

Code Select Expand

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

Code Select Expand

<a href="#">
behind the

Code Select Expand

<?php
// List all Images
and close "a" Tag after php.

[artifactis]

thanks no_leaf it worked but the images have been made smaller for some reason

[no_leaf]

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:

Code Select Expand

echo $image->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true);

Second one additional-images to:

Code Select Expand

echo $image->displayMediaFull('class="product-image"', false, 'class="modal"', true, true);

[baijianpeng]

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.

[K&K media production]

components\com_virtuemart\views\productdetails\tmpl -> default.php

add

Code Select Expand


$('.additional-images .product-image').click(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
                        $('.main-image a').attr('href',himg );
});


after

Code Select Expand


$('a.ask-a-question').click( function(){
$.facebox({
iframe: '" . $this->askquestion_url . "',
rev: 'iframe|550|550'
});
return false ;
});



and in default_images.php

change

Code Select Expand


    <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

Code Select Expand


    <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

[Marga123]

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   

jQuery(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   

      
   /*   $('.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

[K&K media production]

the second code must be in default_images.php and not default_addtocart.php