Arkadaşlar default olarak olan "sizin için seçtiklerimiz" kısmında ki şu görüntüyü;
Nasıl bu hale getirebilirim? Yöneticilerden yardım bekliyorum.
Nasıl bu hale getirebilirim? Yöneticilerden yardım bekliyorum.
yusufozcelik
Yönetici
Opencart Uzmanı
arkadaşım istediğiniz vipdukkan.com'daki Easy Slider jQuery plugin.
Bunu yapabilmeniz için kullandığınız temada featured.tpl dosyasında değişiklik yapmanız gerekiyor. Aynı zamanda featured.tpl dosyasına bir takım php kodları eklemeniz gerekiyor.
Gerekli işlemler;
catalog/javascript/js/easySlider1.7.js olarak kaydedin...
CSS Dosyası... (Css içerisindeki resimleri alman gerekiyor.)
Featured.tpl dosyana ekle
Verdiklerim Temel Bilgilerdi düzenleyerek gidebilirsin. Devamını kendin yapabilirsin burada hepsini paylaşmam doğru olmaz.
Bunu yapabilmeniz için kullandığınız temada featured.tpl dosyasında değişiklik yapmanız gerekiyor. Aynı zamanda featured.tpl dosyasına bir takım php kodları eklemeniz gerekiyor.
Gerekli işlemler;
catalog/javascript/js/easySlider1.7.js olarak kaydedin...
Kod:
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options) {
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 500,
auto: false,
pause: 3000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow", "hidden");
var ts = s - 1;
var t = 0;
$("ul", obj).css('width', s * w);
if (options.continuous) {
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width', (s + 1) * w);
};
if (!options.vertical) $("li", obj).css('float', 'left');
if (options.controlsShow) {
var html = options.controlsBefore;
if (options.numeric) {
html += '<ol id="' + options.numericId + '"></ol>';
}
else {
if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>';
html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if (options.numeric) {
for (var i = 0; i < s; i++) {
$(document.createElement("li")).attr('id', options.numericId + (i + 1)).html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>').appendTo($("#" + options.numericId)).click(function() {
animate($("a", $(this)).attr('rel'), true);
});
};
}
else {
$("a", "#" + options.nextId).click(function() {
animate("next", true);
});
$("a", "#" + options.prevId).click(function() {
animate("prev", true);
});
$("a", "#" + options.firstId).click(function() {
animate("first", true);
});
$("a", "#" + options.lastId).click(function() {
animate("last", true);
});
};
function setCurrent(i) {
i = parseInt(i) + 1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust() {
if (t > ts) t = 0;
if (t < 0) t = ts;
if (!options.vertical) {
$("ul", obj).css("margin-left", (t * w * -1));
}
else {
$("ul", obj).css("margin-left", (t * h * -1));
}
clickable = true;
if (options.numeric) setCurrent(t);
};
function animate(dir, clicked) {
if (clickable) {
clickable = false;
var ot = t;
switch (dir) {
case "next":
t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
break;
case "prev":
t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot - t);
var speed = diff * options.speed;
if (!options.vertical) {
p = (t * w * -1);
$("ul", obj).animate({
marginLeft: p
}, {
queue: false,
duration: speed,
complete: adjust
});
}
else {
p = (t * h * -1);
$("ul", obj).animate({
marginTop: p
}, {
queue: false,
duration: speed,
complete: adjust
});
};
if (!options.continuous && options.controlsFade) {
if (t == ts) {
$("a", "#" + options.nextId).hide();
$("a", "#" + options.lastId).hide();
}
else {
$("a", "#" + options.nextId).show();
$("a", "#" + options.lastId).show();
};
if (t == 0) {
$("a", "#" + options.prevId).hide();
$("a", "#" + options.firstId).hide();
}
else {
$("a", "#" + options.prevId).show();
$("a", "#" + options.firstId).show();
};
};
if (clicked) clearTimeout(timeout);
if (options.auto && dir == "next" && !clicked) {;
timeout = setTimeout(function() {
animate("next", false);
}, diff * options.speed + options.pause);
};
};
};
// init
var timeout;
if (options.auto) {;
timeout = setTimeout(function() {
animate("next", false);
}, options.pause);
};
if (options.numeric) setCurrent(0);
if (!options.continuous && options.controlsFade) {
$("a", "#" + options.prevId).hide();
$("a", "#" + options.firstId).hide();
};
});
};
})(jQuery);CSS Dosyası... (Css içerisindeki resimleri alman gerekiyor.)
Kod:
/* Anasayfa Slider **************************/
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next {
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* Easy Slider */
#slider ul, #slider li, #slider2 ul, #slider2 li {
margin:0;
padding:0;
list-style:none;
}
#slider2 {
margin-top:1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:274px;
height:448px;
overflow:hidden;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
width:30px;
height:29px;
position:absolute;
left:0px;
top:200px;
z-index:0;
}
#nextBtn, #slider1next {
left:244px;
}
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a {
display:block;
position:relative;
width:30px;
height:29px;
background:url(../images/dukkanSayfasi/slider-sol-btn.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
background:url(../images/dukkanSayfasi/slider-sag-btn.png) no-repeat 0 0;
}
.urun-slider {
width:300px;
height:450px;
overflow:hidden;
position:relative;
}
.urun-slider ul, urun-slider ul li {
margin:0;
padding:0;
list-style:none;
}
.urun-slider ul li {
width:300px;
height:450px;
overflow:hidden;
}Featured.tpl dosyana ekle
Kod:
<script type="text/javascript" src="catalog/javascript/jquery/js/easySlider1.7.js"> Kod:
<script type="text/javascript" scr="catalog/javascript/jquery/js/slider.css"> Kod:
<div class="modul-baslik">Moda Editörümüzden Öneriler</div><div class="modul-baslik-kirmizi"></div></div><ul><li><a href='Ürün URL linki Php olarak eklenecek.'><div class="slider-content"><img src="Ürün resim linki"></div><div class="slider-footer"><div class="slider-urunad">Ürün İsmi</div></div></a></li>Verdiklerim Temel Bilgilerdi düzenleyerek gidebilirsin. Devamını kendin yapabilirsin burada hepsini paylaşmam doğru olmaz.
Yorum yapmak için giriş yapın veya Kayıt olun
Yorum yapabilmek için üye olmalısınız
Hesap oluştur
Forumumuzda bir hesap oluşturun. Çok kolay!
Giriş yap
Zaten bir hesabınız var mı? Buradan giriş yapın.
Konuyu Okuyanlar (Toplam: 0)