Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Loading preview images into the main image
 
dsided
Jr. Member
 
Total Posts:  7
Joined:  2008-05-30
 

Most ecommerce sites load preview images (small images below the main image) into the main image when clicked. Magento however loads a popup window.

Can other member share how to custimise magento to do this?

Thanks in advance.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mzentrale1
Guru
 
Total Posts:  731
Joined:  2007-12-06
Stuttgart, Germany
 

Hi,

this could be done by javascript. You have to customize the views of the product detail.

Cheers

Stefan

 
Magento Community Magento Community
Magento Community
Magento Community
 
mzentrale1
Guru
 
Total Posts:  731
Joined:  2007-12-06
Stuttgart, Germany
 

Hi,

we did it by this customization of media.phtml

<?php $_product $this->getProduct() ?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<class="main-product-img">
    <
img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
</
p>
<?php else: ?>
<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(300, 408); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
<?php endif; ?>
<?php 
if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <
ul>
    
<?php foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
            <
a href="#" onClick="document.getElementById('image').src = '<?php echo $_image->getUrl(); ?>';">
                <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(80, 109); ?>" width="80" height="109" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
            </
a>
        </
li>
    
<?php endforeach; ?>
    
</ul>
</
div>
<?php endif; ?>
<div id="controlbar" class="highslide-overlay controlbar">
    <
a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
    <
a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
    <
a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
    <
a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</
div>

Cheers

Stefan

 
Magento Community Magento Community
Magento Community
Magento Community
 
a0z0ra
Jr. Member
 
Total Posts:  8
Joined:  2008-05-14
 

Thank you so much for this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
pdxwebhead
Jr. Member
 
Total Posts:  27
Joined:  2008-07-16
Portland Oregon
 

Hi, I have tried implementing this HighSlide solution in the Modern Theme, but my lack of understanding of how Magento works is limiting my success. Could you possibly expand this explanation to include:

What CSS files need to be either 1)added, or 2)modified.
And:

What is the folder structure for the highslide.js files - or where do they go? I have them in : /root/magento/skin/frontend/default/modern/js/highslide/

And is the media.phtml file the only one that needs to be modified?

I have tried using the Telescope Theme to figure out how Highslide works, but I am missing some critical code. I have tried using the Lightbox tutorial as a guide, but it’s just different enough to confuse me.

Any help would be greatly appreciated!

 
Magento Community Magento Community
Magento Community
Magento Community
 
surtsey
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-02-11
 

I implemented HighSlide successfully today.
I used the suggestions of [m] zentrale and altered a couple of files until everything worked.
There are multiple files to alter.
The first file to alter is the media.phtml in /app/design/frontend/default/default/template/catalog/product/view/… find

<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
and replace it with
<a href="<?php echo $_image->getUrl(); ?>" class="highslide" onClick="return hs.expand(this, {captionId: 'caption1'})"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(80, 109); ?>" width="80" height="109" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/></a>
With this step you altered the link on the small icons to work with HighSlide.

The well-known controlbar is to paste at the end in the footer.phtml in the /app/design/frontend/default/default/template/page/html/… folder

<div id="controlbar" class="highslide-overlay controlbar">
    <
a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
    <
a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
    <
a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
    <
a href="#" class="close" onclick="return hs.close(this)" title="Close"></a
</
div>

If you don’t want to have the large picture displayed above the small ones delete in the media.phtml you altered before

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<class="main-product-img"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>
<
class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture'?></p>

<
div class="image-zoom" id="track_outer">
    <
img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <
div id="track">
        <
div id="handle"></div>
    </
div>
    <
img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</
div>
<
script type="text/javascript">
    
Event.observe(window'load', function() {
        product_zoom 
= new Product.Zoom('image''track''handle''zoom_in''zoom_out''track_hint');
    
});
</script>
<?php 
else: ?>
<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php endif; ?>

The next step is to alter the head.phtml to include the JavaScript files of HighSlide. You’ll find this file in the /app/design/frontend/default/default/template/page/html/… folder.
Add

<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
    
hs.registerOverlay(
        
{
            thumbnailId
null,
            
overlayId'controlbar',
            
position'top right',
            
hideOnMouseOuttrue
        }
    
);

    
hs.graphicsDir 'highslide/graphics/';
    
hs.outlineType 'rounded-white';
</script>
right before the line
<?php echo $this->getCssJsHtml() ?>
In addition you have to alter the directories to point exactly to the files where you uploaded HighSlide.

Now the JavaScript part is done.

To add the styles regarding to HighSlide copy & paste the content of the attached .txt at the END of the boxes.css in the /skin/frontend/default/default/css/… folder. If you are using other fonts and font-sizes than in HighSlide, you should delete

{
    font
-familyVerdanaHelvetica;
    
font-size10pt;
}

I hope I pointed out all alterations you’ll need. Please be sure to buy a legal license. And no, I am not Torstein Hønsi wink

File Attachments
highslide-css.txt  (File Size: 3KB - Downloads: 377)
 
Magento Community Magento Community
Magento Community
Magento Community
 
larrpan
Jr. Member
 
Total Posts:  17
Joined:  2008-07-01
 

[m] zentrale can you either paste the entire code of the media.phtml file, or let us know where exactly to paste the new code? Also, will this customization work with newest version of Magento?  Thanks for your time smile

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top