Magento Forum

Gallery Looping - how to use GetNextImage()? 
 
havocware
Jr. Member
 
Avatar
Total Posts:  13
Joined:  2008-04-09
Chicago, IL
 

Hey All,

I’m trying to make (what I assumed was) a quick change to the gallery in media.phtml, but it’s killing me - hoping for any help here!

Basically I have a product which has multiple color options.  In the product images section, I’ve uploaded two versions of each color:
A1_thumbnail, A1_main

A2_thumbnail, A2_main
etc., [check the image if this is confusing so far]

In media.phtml, I’ve modified the fornext loop to pull the thumbnail, and then the next image which will eventually be linked to from the thumbnail:

<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail'$_image->getFile())->directResize(68,68,4);?>
<br>
<? echo $this->helper('catalog/image')->init($this->getProduct(), 'image'$_image->getNextImage()); ?>
However, this will only get the placeholder image, and not the actual next image url.

Obviously I’m not sure how this function works, and I’ve tried everything I could think of so far.

Can someone point me in the right direction to loop thru the product images, and get the next image in the list?

Thx!

- hw

Image Attachments
mag_images.gif
 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

I’m not really sure how to do much control over them, but you can see what I did here: http://www.minervapromotions.com/gladrag/i-heart-la-design-by-john-doe.html/

Is that what you’re looking to do?  It’s possible to use the images for the thumbnails too, my client just preferred # tabs.  Let me know and I will try to post a small tutorial here for what I did.

 
Magento Community Magento Community
Magento Community
Magento Community
 
havocware
Jr. Member
 
Avatar
Total Posts:  13
Joined:  2008-04-09
Chicago, IL
 
sherrie - 26 June 2008 08:53 AM

I’m not really sure how to do much control over them, but you can see what I did here: http://www.minervapromotions.com/gladrag/i-heart-la-design-by-john-doe.html/

Is that what you’re looking to do?  It’s possible to use the images for the thumbnails too, my client just preferred # tabs.  Let me know and I will try to post a small tutorial here for what I did.

Actually, I was able to hack at it and get what I need - although the overhead might prove to be a little too high. 

My client is [going to be] selling jewelry - and a lot of their pieces will be primarily the same, only with different accent colors.  I wanted to have a close-up thumbnail of each available accent color, which when clicked will load a full size image of the product in the main product div.  That div can then be zoomed with MagicZoom.

Everything currently works as intended, and you can check out my progress here: [xxxxx] UPDATED - SOLVED!  See http://www.inarohajewelry.com for working example with MagicZoom.

Here’s what I had to do to get it to work - in the image gallery upload, I have 3 versions of each color variant:
A -small close-up thumbnail
B - Medium sized preview image
C - Large sized zoom-able image.

In order for this to work now, I had to pre-loop thru the gallery, and save each of the image urls ($_image->url) to an associative array, keyed from the thumbnail’s image ID ($_image->id)

This is mainly because when using the standard foreach loop that the gallery uses, I wasn’t able to get the next image url for the thumbnail to click to ["A" links to “B”, “B” zooms to C], which is why I was curious about the GetNextImage() function.

This would result in an array like this:

$imgLoop[466][thumbnail] "http:www.example.com/product/101/0...A1_thumbnail.jpg"
$imgLoop[466][small] "http:www.example.com/product/101/0...A1_small.jpg"
$imgLoop[466][full] "http:www.example.com/product/101/0...A1_full.jpg"

etc with all subsequent image IDs

Then I use the standard foreach loop in the gallery and refernce the images I need from their imageID:

<?php foreach ($this->getGalleryImages() as $_image):
    
        if ((
$_image->disabled)!=1):
    
?>
    
    
<li>

        <
div class="thumbnail">
        <
a href="<?php echo $imgLoop[$_image->id]['full'];?>" rel="zoom1" rev="<?php echo $imgLoop[$_image->id]['small']; ?>" title="<?php echo $this->htmlEscape($_product->getName()).' - '.$imgLoop[$_image->id]['label'];?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->directResize(68,68,4);?>"/></a>
        </
div>
    
    <
div class="label"><?php echo $imgLoop[$_image->id]['label'];?></div>
 

    </
li>
    
      
<?php endif;?>
      <?php 
endforeach; ?>

I should mention, that in order to get the first loop to grab all images (only the thumbs are viewable via the Product Image config - all others are “disabled"), I had to modify /app/code/core/Mage/catalog/Block/Product/Gallery.php - so that disabled items will not be skipped.  I simply moved that functionality over to the display loop - which is the if (($_image->disabled)!=1): trap you see above.

Anyway - this is going to cause 2 loops - one for gathering the urls, and another for display - unless I can figure out how GetNextImage() works, or make my own.

Thanks for the input tho - and nice work on your projects - all of ‘em...!

- hw

 
Magento Community Magento Community
Magento Community
Magento Community
 
havocware
Jr. Member
 
Avatar
Total Posts:  13
Joined:  2008-04-09
Chicago, IL
 

Well - in typical fashion I’ve just noticed that for some reason MagicZoom doesn’t like to play nice with Magento and IE?

NBD for now, but I’m glad Ive been checking my progress in both browsers along the way.

- hw

UPDATE - MagicZoom works just fine with IE.

 
Magento Community Magento Community
Magento Community
Magento Community
 
cutemonster
Jr. Member
 
Total Posts:  11
Joined:  2008-07-07
 

is there anyway I can take a look at the code?  I don’t know how to get start.
Basically, i need to implement what havocware trying to do. 
A set of color where the image would change everytime a user select an color option.

Any help is appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
havocware
Jr. Member
 
Avatar
Total Posts:  13
Joined:  2008-04-09
Chicago, IL
 
cutemonster - 21 July 2008 10:26 PM

is there anyway I can take a look at the code?  I don’t know how to get start.
Basically, i need to implement what havocware trying to do. 
A set of color where the image would change everytime a user select an color option.

Any help is appreciated.

@Cutemonster: I was able to rewrite media.phtml, as well as alter the “inactive” flag setting to achieve what I needed for the gallery.

Check http://www.inarohajewelry.com for a sample.  i can show you what I did if it’s what you’re looking for.

Now - if anyone can attach the super-attribute dropdown menu to the thumbnail action… smile

- hw

 
Magento Community Magento Community
Magento Community
Magento Community
 
davion
Jr. Member
 
Total Posts:  18
Joined:  2008-05-03
 

@havocware

I think it’s a good idea to upload all product images atleast with

$imgLoop[466][thumbnail] "http:www.example.com/product/101/0...A1_thumbnail.jpg"
$imgLoop[466][small] "http:www.example.com/product/101/0...A1_small.jpg"

i like your working example, with ability to change small image at thumbnail click.

I think it’s good idea to put it to wiki. Don’t you?

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