Magento Forum

   
Flash hackery for product images
 
GFX Complex
Member
 
Avatar
Total Posts:  47
Joined:  2007-11-19
St.Louis
 

First here’s the link.
https://mermadebaubles.com

*Please note this is still in development and has a bug or two*
So what I did here was use a php for loop to create flash vars for the thumbnails and the main images for the product in the product view.
The image is oversize which removes the need to use the zoom in tool “since we all know they will zoom in every time any ways”

I added thumb nails in flash so you can swap out the image content with out the need for a pupup or a light box.
The images switch smoothly from one to the next, plus there is a auto image slide show going through all the available images.

 
Magento Community Magento Community
Magento Community
Magento Community
 
weckl
Member
 
Total Posts:  50
Joined:  2008-07-13
Singapore
 

Hey GFX,

Great stuff!.. how abt sharing the php codes ?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
wsegatto
Member
 
Avatar
Total Posts:  48
Joined:  2008-07-03
Brazil
 

Yeah, won’t you share it with us! It’s great!

 
Magento Community Magento Community
Magento Community
Magento Community
 
GFX Complex
Member
 
Avatar
Total Posts:  47
Joined:  2007-11-19
St.Louis
 

Well the big part is in the flash file.

The hard part though was getting the flash vars to the flash player.

here is the php for the media.php file that can be found in the app->design->frontend->default->[your template]->template->catalog->product->view->media.php

*This is at best, sloppy code*

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php $_product 
$this->getProduct() ?>
<?php $i 
0 ?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    
<script type="text/javascript">
            
swfobject.registerObject("imageContent""9.0.0""expressInstall.swf");
        
</script>
            
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="690" height="450" id="imageContent">
                <
param name="movie" value="/swf/test.swf" />
                <
param name="FlashVars" value="
                <?php if (count(
$this->getGalleryImages()) > 0): ?>
                <?php foreach (
$this->getGalleryImages() as $_image): ?>                                
                <?php 
$_urlVar = $this->getGalleryUrl($_image)?>
                <?php if (count(
$this->getGalleryImages()) > 0): ?>
                <?php foreach (
$this->getGalleryImages() as $_image): ?>
                <?php 
$_urlVar = $this->getGalleryUrl($_image)?>
                <?php 
$i = $i + 1 ?>var<?php echo $i ?>=<?php echo $_image->getFile()?>,<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>&<?php endforeach; ?>
                <?php endif; ?>
                <?php endforeach; ?><?php endif; ?>"
/>    
                            
                <!--
[if !IE]>-->
                <
object type="application/x-shockwave-flash" data="/swf/test.swf" width="690" height="450"  FlashVars="<?php if (count($this->getGalleryImages()) > 0): ?><?php foreach ($this->getGalleryImages() as $_image): ?><?php $_urlVar = $this->getGalleryUrl($_image)?><?php $i = $i + 1 ?>var<?php echo $i ?>=<?php echo $_image->getFile()?>,<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>&<?php endforeach; ?><?php endif; ?>"
                <!--<!
[endif]-->
                    <
a href="http://www.adobe.com/go/getflashplayer">
                        <
img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </
a>
                <!--
[if !IE]>-->
                </
object>
                <!--<!
[endif]-->
            </
object>
<?php endif; ?>

Note::: I use swfObject to embed my swf files. This requires you to request a javascript file in your header. I found the best way to do that is by uploading your file to the js folder and updating the app->design->frontend->default->[your template]->layout->page.php file with the new JS node.

in the head node add

<action method="addJs"><script>swfobject/swfobject.js</script></action>
or just what ever JS file you use to embed if you do it that way.

for the flash file I just take in the flash var and use action script to display the images.

 
Magento Community Magento Community
Magento Community
Magento Community
 
donMyers
Jr. Member
 
Total Posts:  9
Joined:  2008-10-04
 

Nice work!
Thanks for sharing it.

Don m

 
Magento Community Magento Community
Magento Community
Magento Community
 
hydra
Guru
 
Avatar
Total Posts:  378
Joined:  2008-08-26
Amsterdam
 

Hi, when i visit your page , i get a flash 10 error:

TypeError: Error #1010: A term is undefined and has no properties.
at frontpage_fla::MainTimeline/XMLLoaded()[frontpage_fla.MainTimeline::frame1:82]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

If i choose to continue the site looks fine.

 
Magento Community Magento Community
Magento Community
Magento Community
 
GFX Complex
Member
 
Avatar
Total Posts:  47
Joined:  2007-11-19
St.Louis
 
hydra - 26 December 2008 03:11 AM

Hi, when i visit your page , i get a flash 10 error:

TypeError: Error #1010: A term is undefined and has no properties.
at frontpage_fla::MainTimeline/XMLLoaded()[frontpage_fla.MainTimeline::frame1:82]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

If i choose to continue the site looks fine.

Yeah sorry about that, I never said I was a good action script programmer did I? Though I bet you where on IE when this happened.

As for now I have taken down the changes I did because the modern theme broke with the last upgrade to 1.2.0.1. So I had to upgrade modern and I figured that I would be better off just making my own theme

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