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

Ajaxyfing the popup windows
 
Lopo
Jr. Member
 
Total Posts:  30
Joined:  2007-11-09
 

In /magento/app/design/frontend/default/default/template/catalog/product/ replace:

<?foreach ($this->getGalleryImages() as $_image):?>
       
<li>
            <
a href="#" 
                 
onclick="popWin('<?=$this->getGalleryUrl($_image)?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
               <
img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
             </
a>
        </
li>
  
<?endforeach;?>
by
<?foreach ($this->getGalleryImages() as $_image):?>
        
<li>
             <
a href="#" title="<?=$_product->getName()?> Gallery"
                   
onclick="popWin('<?=$this->getGalleryUrl($_image)?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;"
                    
rel="lightbox">
                  <
img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
              </
a>
        </
li>
   
<?endforeach;?>

Then you just have to include Lightbox2 in /magento/app/design/frontend/default/default/layout/main.xml

<block type="page/html_head" name="head" as="head">
         <
action method="addJs"><script>prototype/prototype.js</script></action>
          <
action method="addJs"><script>prototype/validation.js</script></action>
          <
action method="addJs"><script>scriptaculous/scriptaculous.js</script></action>
          <
action method="addJs"><script>lightbox/lightbox.js</script></action>
          <
action method="setHref"><href>frontend/default/default/css/lightbox.css</href></action>
   </
block>

Maybe this section code from main.xml that start with the following code should be removed or changed?

<!--
     
Product additional images gallery popup
     
-->

I don’t know if this last part refered to main.xml is quite correct. Just digging the code right now rasberry

And don’t forget to include the loading and closing images as referenced on top of lightbox.js.
You can choose your own loading.gif easy at AjaxLoad.info if you want something diferent wink

It will turn everything much more Ajaxy cheese

 
Magento Community Magento Community
Magento Community
Magento Community
 
Travis
Sr. Member
 
Avatar
Total Posts:  125
Joined:  2007-08-31
 

Have a demo?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lopo
Jr. Member
 
Total Posts:  30
Joined:  2007-11-09
 
Travis - 10 November 2007 08:50 PM

Have a demo?

Not yet… but the code is there smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
kameko.rouge
Member
 
Total Posts:  58
Joined:  2007-10-11
 

what does that lightbox script have anything to do with ajax??

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lopo
Jr. Member
 
Total Posts:  30
Joined:  2007-11-09
 
kameko.rouge - 30 December 2007 02:54 PM

what does that lightbox script have anything to do with ajax??

Lightbox 2 is based on the ajax libraries Prototype and Script.aculo.us.
It allows to show the BIG image without reloading any new browser window.

Ajax is a coin word for dynamic web applications using javascript AND not only XmlHttpRequest.

Was your doubt really ignorance and willing to learn or just the urge need to say something?

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