Nivo Slider in Magento Front Page

Posted on Updated on

Here is a simple tutorial which will teach u how to put a slider on ur frontpage of a magento site.
I’m using nivo slider for this instance
First Download Nivo Slider from here

After that u upload the files from the downloaded pack to ur server as listed below
1) jquery.nivo.slider.js to root_dir/js/nivo-slider
2) nivo-slider.css to dir_to_your_theme/css/nivo-slider.css
eg. destination folder “root/skin/frontend/default/default/”
3) similarly upload the required images to the images folder of ur theme folder like dir_to_your_theme/images/arrows.png, etc..

Finally all things are finally uploaded to the server and now we are ready to design our front page.

Goto admin panel then goto Cms->pages link on the admin panel and select the homepage from the list on the following page..

now lets tell magento to add the required js and css files in the front page. to do that click the “design” tab on the left menubar

then on the “layout xml update” input textarea add this

<reference name="head">
<action method="addJs">
<script>nivo-slider/jquery.nivo.slider.js</script>
</action>
<action method="addCss">
<script>css/nivo-slider.css
</script></action>
</reference>

After doing this the js and css files that we uploaded in our server will be loaded when front page is viewed on the browser. You can check for that by refreshing ur front page and viewing the page source and see the there are links to the js and css files and the content of the files appears on clicking them on the “page source” page.

Now its time to build the slider..
Go to the “content” tab on the left menubar
Click “html” from the wysiwyg editor options on the page
then add the following html and javascript

<div id="slider">
<a href="#"> <img title="This is caption1" src="slider1_image_url" alt="" /> </a>
<a href="#"> <img title="This is caption 2" src="slider2_image_url" alt=""/> </a>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
// ]]>
</script>

Tips: one way to input image url would be, to use the wysiwyg editor to upload your slider images, then insert it into the content area. the editor outputs the image’s url while we view in the html view. so from there u can grab the image url and put it in the above html code

Note: Magento uses prototype js library in default installation and we need jquery library for running this slider. So install the jquery extension for magento from the magento community. Moreover when using jquery in magento, remember we are using it in no-conflict mode so don’t forget to use “jQuery” instead of the usual “$” sign.
eg. $(‘#div_id’).hide(); is used as jQuery(‘#div_id’).hide();

Hope this tutorial was beneficial for you.
Cheers!!!

Advertisements

Product Image not appearing in Magento

Posted on Updated on

Had a serious problem today with the product images not displaying in the magento site. After wasting my whole day scratching my head and wondering the cause of that failure. I finally found a solution. The problem was that I was uploading the product images that was of very large size and php was unable to resize the images while displaying it. So there was a memory limitation problem in the server which had caused the image to not be resized and magento system had no image to display.
So if you come across this problem, I suggest you to reduce the size of ur product images and give a try instead of wasting a day 😀
Cheers!!!