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"> </div>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </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)