SOLVED: Product Detail Picture

[c0LIn]

hi there,

here is my problem.

first plz look here http://s403070507.online.de/index.php/component/virtuemart/g60-g-lader-a-tuning/tuningteil/ansaugsystem-g-lader-89-mm-detail?Itemid=104

as u can see there is a Product with 3 Pictures... now the Problem... is it possible that if i click the little ones they become the big one? and if i click the big one that i can see it in full resolution like a bumpbox ?

[ivus]

Hi c0LIn,

OK, so this is your second post, and it's obvious you haven't learnt from your first post. Learn to SEARCH... it's simple.

Your issue has been covered many time before. It's not new whatsoever.

http://forum.virtuemart.net/index.php?topic=103306.msg might help you out.

[c0LIn]

okay i Solved my problem on my own

if anyone wnat to know how here is the code:

we have to do a templateoverride.

go to this directory:

/components/com_virtuemart/views/productdetails/tmpl

there you can find a file named " default_images.php " download this file to your Computer to edit it.

Edit following lines:

Original:

Code Select Expand

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

// Product Main Image
if (!empty($this->product->images[0])) {
    ?>
    <div class="main-image">
    <?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true); ?>
    </div>
<?php } // Product Main Image END ?>

change this code with this one here:

Code Select Expand

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

// Product Main Image?>
<script type="text/javascript">

jQuery(document).ready(function(){
    jQuery('.imgtoggle').click(function(){
        jQuery('.main-image a').attr({
            'href' : 'http://yourHomepage/images/stories/virtuemart/product/' + jQuery(this).attr('alt') + '.jpg'
        }).find('img').attr({
            'src': 'http://yourHomepage/images/stories/virtuemart/product/' + jQuery(this).attr('alt') + '.jpg'
        })
    })
})

</script>
<?php
if (!empty($this->product->images[0])) {
    ?>
    <div class="main-image">
    <?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true); ?>
    </div>
<?php } // Product Main Image END ?>

NOTE: yourHomepage = url Homepage Url

second step is you have to edit your additional image like this:

Original:

Code Select Expand

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

change this to:

Code Select Expand

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

after that u have to upload this file to:

/templates/your_template/html/com_virtuemart/productdetails

if some folders are missing plz create them.

NOTE: your_template = name of the template you are using

if you uploaded and edited the file right it should work now.


for example watch here : click

regards c0LIn

[StormIT]

Works perfectly, thanks cOLIn