28 May 2012

How to Make Creative Image Slider in Web Design with Unique Code ???

Decorating site in best manner is prime aim of the webmasters. So, they are adopting various attractive designs that make their site eye-catching. Nowadays, the trend of Image sliders and sideshows are increasing and it becomes necessary component in web design. With these sliders, webmasters can easily display visual content as well as information in finest ways. Many web designing and developing websites are presenting some unique and creative versions of the classical slide-to-the-side to modern full page sliders.

If you have well-featured website constructed with Magento conversion, Magento Image Slider surely helpful for running your online business successfully and catches attraction of people. These image slides come with some of the best features like animation effect, image manipulation, animation speed, self-configuring status bar, use touch devices, etc. One by one image displays along with accompanying text and headings.

By adding this feature in your homepage, you don’t have modify layout files or add it to your head.html file as CMS page is there to modify it through admin panel. One cannot have to change or edit templates for advertisement, image or banner with module as there are customizable images that can easily enhance home slider for advertising experience through Google image. Webmasters can find Magento Slider in various variants with auto mode. Webmasters can also define number of panels and time-gap between two sliders. For grabbing more attention, it is best to place images, text, links and videos.

Template files and CMS pages are the main place, where webmasters can put slider. So, if you want to make your website more attractive with creative Image Slider then below you will find coding that helpful for you to make finest slider. Putting this coding is helpful for you to make slider of four different categories. On the home page, various categories and respective products are shown that can be scrolled vertically and horizontally.

Magento New Functionality Code

Code for Slider Implementation:

[code]<script type=”text/javascript” src=”<?php echo $this->getSkinUrl(‘js/jquery.js’) ?>”></script>

var j = jQuery.noConflict();

j(document).ready( function(){

j(‘#lofslidecontent45′).lofJSidernews( { interval:2000,

easing:’easeInOutQuad’,

duration:1200,

auto:true } );

});

</script>

<style>

ul.lof-main-wapper li {

position:relative;

}

</style>[/code]

<!– SLIDER – START –>

[code]<div class=”banner”>

<div>

</div>

</div>[/code]

<!– MAIN CONTENT –>

[code]<div>

<ul>

<?php echo $this->getChildHtml(‘topCategoryProduct’) ?>

</ul>

</div>[/code]

<!– END MAIN CONTENT –>

<!– NAVIGATOR –>

[code]<div class=”lof-navigator-outer”>

<ul>

<?php echo $this->getChildHtml(‘topCategory’) ?>

</ul>

</div>

<!– END NAVIGATOR –>

</div>

</div>[/code]

<!– SLIDER – END –>

1) topCategoryProduct – This will have following code (Loads Products Of Categories)

[code]<?php

$_main_categories = $this->getStoreCategories();

foreach ($_main_categories as $_main_category):

<li>

<div>

<?php $_category = Mage::getModel(‘catalog/category’)->load($_main_category->getId()) ?>

<img src=”<?php echo $_category->getImageUrl(); ?>” />

<h3><?php echo $_main_category->getName(); ?></h3>

<?php echo substr($_category->getDescription(),0,100).”…”; ?>

</div>

</li>

<?php

endforeach

2) topCategory – This will have following code (Loads Categories)

<?php

$_main_categories = $this->getStoreCategories();

foreach ($_main_categories as $_main_category):

<li>

<?php

$_productCollection = Mage::getResourceModel(‘catalog/product_collection’)->addCategoryFilter(Mage::getModel(‘catalog/category’)->load($cat_id));

$i=0;

foreach ($_productCollection as $product):

$product->load();

if($i<4)

{

echo “<div style=’width:140px;float:left;’><img src='”.$product->getImageUrl().”‘ width=’100px’ height=’100px’ /></div>”;

}

$i++;

endforeach;

</div>

<div>

<?php $_category = Mage::getModel(‘catalog/category’)->load($_main_category->getId()) ?>

<h3>

<a href='<?php echo $_category->getUrl() ?>’>

<?php echo $_main_category->getName(); ?>

</a>

</h3>

<p><?php echo substr($_category->getDescription(),0,250).”…”; ?></p>

</div>

</li>

<?php

endforeach;

?>[/code]

Author: Harshal Shah

Harshal Shah is CEO & Founder of Xhtmljunkies, Located in Gujarat, India, XHTML Junkies is one of the best companies that offer unique eCommerce solutions by the virtue of its dedicated professionals. Our professionals are extremely proficient in offering development services pertaining to eCommerce. You can find Harshal on Google+ and Twitter.