Eğer sitenizde görüntülemek için birden fazla reklamınız varsa, sitenin reklam sıralamasını rastgele belirlemesi hiç fena olmaz.Reklamveren için de 1. sıra veya 2. sıra olması gibi bir durum ortaya çıkmaz ve sizinde birden çok reklamınız varsa daha güzel bir görüntü ortaya çıkar.
Örneğin, aşağıdaki 4 reklamı “Webdesignerdepot” sitesinden aldım.Aşağıda verdiğim kodları uygularsanız aşağıda anlatmaya çalıştığım gibi; reklamlar rastgele birbirleriyle değişiyor.
Teknik 1: PHP
+Aynı sıralamada farklı başlangıçlar
Bu teknikte reklamları belirli bir sıraya oturtuyoruz.Php kullanarak işlediğimiz kodlar ile her başlangıçta aynı sırada oluyor fakat her başlangıçta farklı reklamlar ilk sıraya yerleşiyor.
<?php
$totalImages = 6;
$randomFirst = rand(1,$totalImages);
for ( $i=$randomFirst; $i <= $totalImages; $i++ ) {
echo "<img src='images/ad-$i.png' alt='ad' /> ";
}
for ( $i=1; $i < $randomFirst; $i++ ) {
echo "<img src='images/ad-$i.png' alt='ad' /> ";
}
?>
Sorunsuz çalışıyor ama sonsuz rastgele dönüşümü içerisinde değil sadece başlangıç reklamını değiştirebiliyoruz.
Teknik 2: PHP
+Rastgele yerleşim
İşte aradığımız sistem; reklamlar tamamen rastgele görüntüleniyor.
<?php
$totalImages = 6;
$all = range(1,$totalImages);
shuffle($all);
foreach ($all as $single) {
echo "<img src='images/ad-$single.png' alt='ad' /> ";
}
?>
Tenkik 3: jQuery
+Rastgele Yerleşim
Diğer PHP sistemine göre daha az ideal olan bir sistem, çünkü resimlerin yüklenmeme ihtimali bulunan bir yapı ve işin içine Javascript’de giriyor.Bu da PHP gibi işlemi hızlı ve sorunsuz halledemiyor.Ama yinede denemek isteyenler için;
Öncelikle James Padolsey tarafından hazırlanmış “shuffle plugin“i indiriyorsunuz ve aşağıdaki kodları kullanarak işlemi gerçekleştiriyorsunuz.
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
$(function() {
$("#ad-group-one img").shuffle();
});
