Having problems with easyslider
Hello,
I'm not sure where I'm supposed to find the code for the slider that was already in the Ashley Pink Template. I have found the Image 1 and others in my FTP...and I keep seeing go to Define_Main_Page.php in the define page editor in the admin area of my store. But I'm not seeing any code in there. What is the code that I'm supposed to be looking for?
I was told There is code in 3 places for the slider:
includes/templates/ashley_pink/css/stylesheet.css -----starts with /*bof slider*/
includes/languages/english/html_includes/ashley_pink/define_main_page.php
includes/modules/pages/index/jscript_easySlider.php
But I only have 2 of those places showing codes....the Stylesheet.css and the jscript_easyslider.php are only showing anything.
I am wanting to add this slider to my Ashley Pink Template I have for my store.
I've found the images1 and so on to add the images...but I'm not sure what code I'm supposed to have in define_main_page.php.
This is what it shows in the stylesheet.css
Code:
/*bof easy slider*/
#slider{margin:0 auto;}
#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:550px;height:250px;overflow:hidden;}
#slider{margin:0 auto;margin-top:20px;}
/*bof easy slider numeric controls*/
#control_div{width:200px;height:18px;position:relative;left:380px;top:0px;margin-bottom:10px;}
ol#controls{margin:1em 0;padding:0;height:18px;}
ol#controls li{margin:0 10px 0 0;padding:0;float:left;list-style:none;height:18px;line-height:18px;}
ol#controls li a{float:left;height:18px;line-height:18px;border:1px solid #ccc;background:#d75f8c;color:#000000;padding:0 10px;text-decoration:none;}
ol#controls li.current a{background:#8c507a;color:#fff;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
#home-images{margin-top:25px;}
#home-text{font-size:120%;width:550px;}
.promote{margin-left:70px;}
This is what it shows in jscript_easySlider.php
Code:
<script type="text/javascript">
<!--
/*
* 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: 2000,
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 += '<div id="control_div"><ol id="'+ options.numericId +'"></div></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);
-->
</script>
This is what it shows in define_main_page.php
Code:
<a href="http://www.lulu.com/content/466605"><img src="images/large/e-start-book.gif" alt="get your manual today" title="Have you got yours yet? Join the 1000’s of Zen Cart users that have bought the only comprehensive owners manual !" /></a>
<p>This content is located in the file at: <code> /languages/english/html_includes/YOUR_TEMPLATE/define_main_page.php</code></p>
<p>You can quickly edit this content via Admin->Tools->Define Pages Editor, and select define_main_page from the pulldown.</p>
<p><strong>NOTE: Always backup the files in<code> /languages/english/html_includes/your_template</code></strong></p>
in my admin area under define page editor
I've added some stuff already to the define_main_page.php under it....so I'm sorta confused on what I'm supposed to do when I keep reading to do it to the define_main_page.php
Thank you
Re: Having problems with easyslider
Re: Having problems with easyslider
Quote:
Originally Posted by
WitchysHeart
I got it figured out
What was the solution. I am facing similar issues with a different template.
