Simple Image Rotator

In Web

Untuk mempercantik sebuah wesbsite tentu dibutuhkan sebuah gambar / image yang cukup menarik. Lalu bagaimana jika gambar tersebut hanya satu, tentu akan membuat pengunjung / visitor bosan. Nah, untuk itu diperlukan sebuah script sederhana untuk membuat gambar berganti-ganti (simple image rotator) dari beberapa gambar yang ada.

Dari berbagai sumber aku akan memberikan script php untuk membuat gambar berganti-ganti secara otomatis dan mungkin metode ini sudah banyak dipakai oleh para master web. Script php simple image rotator ini akan mengubah gambar setiap kali website di load atau di refresh, ada 2 script yang kesemuanya memiliki fungsi yang sama.

Perbedaannya adalah script pertama tidak dapat disisipi link pada source gambarnya sedang script yang kedua dapat. Cukup letakkan script php dibawah ini ke dalam file berekstensi .php dan tentu saja dengan server yang support php, maka script tersebut akan bekerja secara otomatis.

1. Script 01

<?php

function randomImage ( $array ) {
  $total = count($array);
  $call = rand(0,$total-1);
  return $array[$call];
}

$my_images = array (
  "http://blog.bodi.web.id/images/gambar01.jpg",
  "http://blog.bodi.web.id/images/gambar02.jpg",
  "http://blog.bodi.web.id/images/gambar03.gif"
);

echo '<img 
  src="'.randomImage($my_images).'" 
  alt="blog.bodi.web.id" />';
?>

2. Script 02

<?php
$bannerAd[1] = '<a href="#"><img src="http://blog.bodi.web.id/images/gambar01.jpg" /></a>';
$bannerAd[2] = '<a href="#"><img src="http://blog.bodi.web.id/images/gambar01.jpg" /></a>';
$bannerAd[3] = '<a href="#"><img src="http://blog.bodi.web.id/images/gambar01.gif" /></a>';

$adCount = count($bannerAd);
$randomAdNumber = mt_rand(1, $adCount);
echo $bannerAd[$randomAdNumber];
?>

3. Script 03

Masukkan kode berikut sebelum tag </head>

<!-- start banner rotator script for page -->
<style type="text/css">
a {
	outline: none;
}
/* rotator in-page placement */
    div.rotator {
        position: relative; 
	height:70px;
	margin-left: 0px;
	display: none;
}
/* rotator css  */
	div.rotator span {
        position:absolute;
	float:left;
	list-style: none;
}
/* rotator image style */	
	div.rotator span img {
	border:1px solid #ccc;
	padding: 0px;
	background: #FFF;
}
    div.rotator span.show {
	z-index:1;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function theRotator() {
        //Set the opacity of all images to 0
	$('div.rotator span').css({opacity: 0.0});
	//Get the first image and display it (gets set to full opacity)
	$('div.rotator span:first').css({opacity: 1.0});
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
}
function rotate() {	
	//Get the first image
	var current = ($('div.rotator span.show')?  $('div.rotator span.show') : $('div.rotator span:first'));
    if ( current.length == 0 ) current = $('div.rotator ul li:first');
	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator span:first') :current.next()) : $('div.rotator span:first'));

	//Un-comment the 3 lines below to get the images in random order

	//var sibs = current.siblings();

    //var rndNum = Math.floor(Math.random() * sibs.length );

    //var next = $( sibs[ rndNum ] );

	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
};

$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	$('div.rotator').fadeIn(1000);
    $('div.rotator span').fadeIn(1000); // tweek for IE
});
</script>
<!-- end banner rotator script for page -->

Letakkan kode berikut pada posisi yang diinginkan

<div class="rotator">

   <span class="show"><a href=#"><img src="<?php bloginfo('template_url'); ?>/images/images01.jpg" alt="pic1" /></a></span>

    <span><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/images02.jpg" alt="pic2" /></a></span>

</div>

Semoga dapat bermanfaat ……. ­čÖé

Related Search

Tags: #FFF #IE #server #website

Anda sedang membaca artikel tentang Simple Image Rotator. Silahkan baca artikel blog.bodi.web.id tentang Web lainnya. Semoga bermanfaat ...

Hapus Post Lama di WordPress Melalui PHPMyadmin
Hapus Post Lama di WordPress Melalui PHPMyadmin
Sekelumit tentang perintah langsung di PHPMyadmin sudah
Bypass Internet Positif
Bypass Internet Positif
Buat agan-agan yang sudah capek dengan Internet
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Caranya cukup simple, buat file .htaccess pada
Leverage browser caching for Nginx
Leverage browser caching for Nginx
Apa siy Leverage browser caching ? Ini penjelasan

Leave a reply "Simple Image Rotator"


Top