How to create a Magento2 Lightbox Extension

May 9, 2013   //   by kdecom   //   magento, magento-extension, magento2, magento2-tutorial  //  No Comments

How to create a Magento2 Lightbox Extension

 

Why do i learn from this extension?

Light box extension helps magento2 developer to get more knowledge about how to use magento system data and layout. and important how to over ride a magento layout with your own template.

 

Now we start Developing Extension

Before we start i will show you the folder and files to make this extesion.

magento2-lightbox-extension-folder-stucture-with-file

Lets Start now….

Step1:-  First create a config.xml file inside the Kdecom/Lightbox/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Kdecom_Lightbox>
            <version>1.0.0.0</version>
            <active>true</active>
        </Kdecom_Lightbox>
    </modules>
    <frontend>
        <layout>
            <updates>
                <lightbox module="Kdecom_Lightbox">
                    <file>layout.xml</file>
                </lightbox>
            </updates>
        </layout>
    </frontend>
</config>

 

Step 2:- Create a file called system.xml inside the Kdecom/Lightbox/etc/adminhtml/system.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <system>
        <section id="catalog">
            <group id="lightbox" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Kdecom Lightbox</label>
                <field id="enable" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="1">
                    <label>Enable</label>
                    <comment>Change Yes and No to Enable or Disable the Lightbox effect on Product Page</comment>
                    <source_model>Mage_Backend_Model_Config_Source_Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

Step3:- Create a layout.xml file inside the Kdecom/Lightbox/view/frontend/layout.xml

<?xml version="1.0"?>
<layout version="0.1.0">

    <default>
        <reference name="head">
            <action method="addCSs">
                <name>Kdecom_Lightbox::css/lightbox.css</name>
            </action>
            <action method="addJs">
                <name>Kdecom_Lightbox::js/lightbox.js</name>
            </action>
        </reference>
    </default>
    <catalog_product_view>
        <reference name="product.info.media">
            <action method="setTemplate">
                <template>Kdecom_Lightbox::lightbox/media.phtml</template>
            </action>
        </reference>
    </catalog_product_view>    
</layout>

Step4:-  create a file called medial.phtml inside the Kdecom/Lightbox/view/frontend/lightbox/media.phtml

<?php
    $mediaBlock = $this->getLayout()->createBlock('Mage_Catalog_Block_Product_View_Media');
    $_product = $mediaBlock->getProduct();
    $_helper = $this->helper('Mage_Catalog_Helper_Output');
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <?php
        $_img = '<a href="'.$this->helper('Mage_Catalog_Helper_Image')->init($_product, 'image').'" rel="lightbox[kdecom]"> <img  id="image" src="'.$this->helper('Mage_Catalog_Helper_Image')->init($_product, 'image').'" alt="'.$this->__($mediaBlock->getImageLabel()).'" 
            title="'.$this->__($mediaBlock->getImageLabel()).'" /></a>';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>

<?php else: ?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$mediaBlock->getBaseImageUrl($_product).'" alt="'.$this->__($mediaBlock->getImageLabel()).'" title="'.$this->__($mediaBlock->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>
<?php if (count($mediaBlock->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
    <?php $_size = $mediaBlock->getBaseImageIconSize()?>
    <?php foreach ($mediaBlock->getGalleryImages() as $_image): ?>
        <li>
            <a href="<?php echo $this->helper('Mage_Catalog_Helper_Image')->init($mediaBlock->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[kdecom]"
               title="<?php echo $this->__($_image->getLabel()) ?>">
                <img src="<?php echo $this->helper('Mage_Catalog_Helper_Image')->init($mediaBlock->getProduct(), 'image', $_image->getFile())->resize($_size); ?>" 
                     width="<?php echo $_size?>" height="<?php echo $_size?>" alt="<?php echo $this->__($_image->getLabel()) ?>"/>
            </a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

That’s all you need to do and make sure you download the css and images for lightbox as well. Well we don’t need the jQuery included in magento2 because magento2 use jQuery instead of prototype.js.

There is one thing we have to do is just to change the lightbox css to use relative path for  the image and remove the loading and close image from lightbox.js.

If you don’t want to do that then just simply download the code and use that js and css files.
Download code is here.

[freebiesub download=”http://www.kdecom.com/wp-content/uploads/2013/05/Kdecom-Lightbox.zip”]

Leave a comment

css.php