0

Hi i have custom module with image how to add thumbnail slider for this

<div class="fanbook-img">
        <?php $collection = Mage::getModel('fanbook/fanbook')
        ->getCollection()
        ->addFieldToFilter('status', array('eq'=>'1'));

                foreach($collection as $child){
                    $mediaurl=Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
                    $value =$child->getImg();?>

                        <li>
                            <?php echo '<img src="'.$mediaurl.$value.'" style="width:250px;height:250px;text-align:center;" />'; ?>
                        </li>

                <?php }
        ?>
    </div>
  • Do you want to add thumbnail in admin grid? – Prashant Valanda Apr 19 '16 at 11:11
  • No in frontend i want to add this images as a slider – user38506 Apr 19 '16 at 11:13
0

Use below code:

<div class="fanbook-img">
        <?php $collection = Mage::getModel('fanbook/fanbook')
        ->getCollection()
        ->addFieldToFilter('status', array('eq'=>'1')); ?>
           <ul class="owl-carousel">
         <?php       
             foreach($collection as $child){
                    $mediaurl=Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
                    $value =$child->getImg();
          ?>

                 <li class="item">
                   <?php echo '<img src="'.$mediaurl.$value.'" style="width:250px;height:250px;text-align:center;" />'; ?>
                  </li>

         <?php } ?>
       </ul>
</div>

<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});
});
</script>

Download slider css and js from here . Add css and js in head using below code:

app/design/Your-Theme/Your-Package/frontend/layout/local.xml

<?xml version="1.0"?>
<layout>
    <default>
      <reference name="head">
            <!--Add CSS and JS, skin Folder-->
            <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="addItem"><type>skin_js</type><name>js/functions.js</name></action>
      </reference>
    </default>
</layout>

add css file and js file to skin/Your-Theme/Your-Package/css and skin/Your-Theme/Your-Package/js change name as per your file in above local.xml code

  • thanks for replay where i can download that js & Css under that link demo only is there – user38506 Apr 19 '16 at 11:58
  • There is Download on navigation menu in upper right corner – Prashant Valanda Apr 19 '16 at 12:07
  • Ok i will check and Let you know thanks for Response – user38506 Apr 19 '16 at 12:11
  • <reference name="head"> <action method="addItem"><type>skin_css</type><name>css/owl.carousel.css</name></action> <action method="addItem"><type>skin_js</type><name>js/fanbook/owl.carousel.js</name></action> <action method="addItem"><type>skin_js</type><name>js/fanbook/owl.carousel.min.js</name></action> </reference> – user38506 Apr 19 '16 at 13:26
  • anything i missed it's not working – user38506 Apr 19 '16 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy