Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery Slider in Magento

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 404
    Comment on it

    In Magento 1.9 new RWD theme have its own jQuery Slider. Using the same slider cycle we can add slider in our page. We can find the jQuery slider coder in this path skin>frontend>rwd>default>js>slideshow.js,

    The code here looks like 
     

    $j(document).ready(function () {
    
    $j('.slideshow-container .slideshow')
    
    .cycle({
    
    slides: '> li',
    
    pager: '.slideshow-pager',
    
    pagerTemplate: '<span class="pager-box"></span>',
    
    speed: 600,
    
    pauseOnHover: true,
    
    swipe: true,
    
    prev: '.slideshow-prev',
    
    next: '.slideshow-next',
    
    fx: 'scrollHorz'
    
    });
    
    });

    We have to just include the above code to our page and with the html list having images in the list, to Include the same call the class in the parent container.

    class="slideshow-container"

    and for the ul or li 

    class = "slideshow"

    This can be done as,

    <div class="slideshow-container">
        <ul class="slideshow">
            <li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
            <li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
            </ul>
    <div class="slideshow-pager">&nbsp;</div>
    <span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>
    

     

    If you need to add the slider in your theme's product view page there add the below code to display the same.

    Below code can be used for the same as,

     

    <?php if ($_products = $this->getRecentlyViewedProducts()): ?>
    <div class="block block-list block-viewed">
        <div class="block-title">
            <strong><span><?php echo $this->__('Recently Viewed Products') ?></span></strong>
        </div>
        <div class="block-content slideshow-container"> <!-- Added a class for parent container-->
            <ol id="recently-viewed-items" class="mini-products-list slideshow"> <!-- Added a class for container-->
            <?php foreach ($_products as $_item): ?>
                <li class="item">
                    <a href="<?php echo $this->getProductUrl($_item) ?>">
                        <span class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>" /></span>
                    </a>
                    <div class="product-details">
                        <p class="product-name">
                            <a href="<?php echo $this->getProductUrl($_item) ?>">
                                <?php echo $this->helper('catalog/output')->productAttribute($_item, $_item->getName() , 'name') ?>
                            </a>
                        </p>
                    </div>
                </li>
            <?php endforeach; ?>
            </ol>
            <script type="text/javascript">decorateList('recently-viewed-items');</script>
        </div>
    </div>
    <?php endif; ?>

      Put the above code in your page and magically the slider will get appeared.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: