PHP script to change images on page refresh

In this tutorial i am going to show you how to change images dynamic on each time you refresh your page.

Demo

There is simple PHP script to get it working.

srand( microtime() * 1000000 );
$num = rand(1,2);
switch($num)
{
     case 1: 
     $imageName = "image1.jpg";
     break;
     case 2: 
     $imageName = "image2.jpg";
     break;
}

echo "<img src=images/".$imageName." />";

Read More

Magento jquery Image slider Demo

This is the demo of magento jQuery simple images slider. If you want to implement this in your site, check the following post there is a step by step explanation given.

Image slider for Magento

• 
• 
• 
• 
• 
• 

Read More

Image slider for Magento

Using this post you can add jQuery Image slider in any page

Download the following js.

jquery.js
jquery.caroufredsel-5.6.4-packed.js

Click here for Live demo

Put that files in your skin/frontend/default/[Your Theme]/js directory.
Call these js file in your page in which you want to add the slider as following .

<script src="<?=$this->getSkinUrl()?>js/jquery.js" type="text/javascript"></script>

<script>
    $j = jQuery.noConflict(); //this way the jquery is not Conflict with other js
</script>

<script src="<?=$this->getSkinUrl()?>js/jquery.carouFredSel-5.6.4-packed.js" type="text/javascript"></script>

Add the following script in same page.

<script>
      $j(function() {
           $j('#callaction').carouFredSel({
                 prev: '.jcarousel-prev-horizontal',
                 next: '.jcarousel-next-horizontal',
                 pagination: "#pager2", auto: false
           });
     });
</script>

Now set the html as following.

<div class=" jcarousel-skin-callaction">
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
        <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
            <ul class="jcarousel-list jcarousel-list-horizontal" id="callaction" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 1606px;">
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image1.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image2.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image3.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image4.jpg" /></a></li>
                <li><a href="#"><img src="<?php echo $this->getSkinUrl()?>images/image5.jpg" /></a></li>
            </ul>
        </div>
        <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
        <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
    </div>
</div>

Now add following class in your styles.css


.jcarousel-skin-callaction .jcarousel-container-horizontal {
    height: 113px;
    overflow: hidden;
    width: 47%;
    background: none repeat scroll 0 0 #EFEFEF;
    padding: 15px 20px;
}
.jcarousel-skin-callaction .jcarousel-clip-horizontal {
    height: 113px;
    width: 100%;
    overflow: hidden;
}
.jcarousel-skin-callaction .jcarousel-item {
    height: 113px;
    overflow: hidden;
    width: 251px;
    margin-left: 8px;
    margin-right: 0;
}
.block-callaction li div.thumb {
    border: 1px solid #FFFFFF;
    height: 142px;
    margin: 0 5px;
    overflow: hidden;
    position: relative;
    width: 234px;
}
.block-callaction li div.thumb a {
    color: #FFFFFF;
    display: block;
    float: left;
    text-decoration: none;
}
.jcarousel-skin-callaction .jcarousel-prev-horizontal {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic3dcULpDRUrAWiVB1i60wnmgXQJ1OPAu7U1A7WQPnq3FzFCgysEqAEPv2hfXdULLhbj6nKiNGUDuD9gmS9uSRaiGBsuU3zf0eHgNu7UXAbyA3UrXb9-47rTGMxdCKrxlX9YtA2Mnm9J4/s192-p-no/") repeat scroll center center rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 174px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 15px;
    z-index: 50;
}
.jcarousel-skin-callaction .jcarousel-next-horizontal {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic3dcULpDRUrAWiVB1i60wnmgXQJ1OPAu7U1A7WQPnq3FzFCgysEqAEPv2hfXdULLhbj6nKiNGUDuD9gmS9uSRaiGBsuU3zf0eHgNu7UXAbyA3UrXb9-47rTGMxdCKrxlX9YtA2Mnm9J4/s192-p-no/") repeat scroll center center rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 174px;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 15px;
    z-index: 50;
}
.caroufredsel_wrapper{width: 100% !important; height: 113px!important;}
.caroufredsel_wrapper ul li .thumb img{width: 100%;}
Put image1 to image5 in your skin/frontend/default/[Your Theme]/images

Read More