 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
flavio
Threadersteller
Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht: 
|
Verfasst So 17.10.2010 16:02
Titel hilfe bei multiple image slider |
  |
|
Hi,
ich möchte den easy image slider in wordpress nutzen.
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
http://cssglobe.com/lab/easyslider1.7/02.html
das funktioniert alles wunderbar wenn der image slider nur ein mal verwendet wird. jedoch möchte ich ihn öfters auf einer seite nutzen. das soll auch funktionieren nur stelle ich mich zu blöd dafür an. es erscheinen für den zweiten slider keine numeric buttons
| Zitat: | In reply to ParryR. I also had this problem. The solution is to define the navigationId in your Jquery document ready call.
$(document).ready(function(){
$("#slider1").easySlider({
continuous: true,
numeric: true
});
$("#slider2").easySlider({
continuous: true,
numeric: true,
numericId: 'control2'
});
});
Whatever you call your second slider numericId you'll need to duplicate your CSS for it. Hope that makes sense, |
mein code
| Code: | <?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory');?> /js/easySlider1.7.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#slider").easySlider(
);
$("#slider1").easySlider({
numericId: 'control2'
});
});
</script> |
css
| Code: | }
#slider ul, #slider li,
#slider1 ul, #slider1 li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li,
#slider1, #slider1 li
{
/*
define width and height of container element and list item (slide)
list items must be the same size as the slider area
*/
width:515px;
height:350px;
margin:0px 0px 0px 0px;
overflow:hidden;
}
#slider img,
#slider1 img{
margin:0px 0px 0px 0px;
padding:0px;
padding-bottom:0px;
border:0px;
}
span#prevBtn{}
span#nextBtn{}
ol#controls,
ol#controls1{
margin:0em 0;
margin-left:0px;
padding:0;
height:11px;
}
ol#controls li,
ol#controls1 li{
margin:0 2px 0 0;
padding:0;
float:left;
list-style:none;
height:11px;
line-height:8px;
}
ol#controls li a,
ol#controls1 li a{
float:left;
height:11px;
line-height:10px;
background:#e8e8e8;
color:#555;
padding:0 5px;
text-decoration:none;
}
ol#controls li.current a,
ol#controls1 li.current a{
background:#34869a;
color:#fff;
}
ol#controls li a:focus, a:hoover, #prevBtn a:focus, #nextBtn a:focus,
ol#controls1 li a:focus, a:hoover, #prevBtn a:focus, #nextBtn a:focus{outline:none;
background:#8bd140;}
/* // Easy Slider */ |
kann da jemand helfen?
Zuletzt bearbeitet von flavio am So 17.10.2010 16:03, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst So 17.10.2010 17:28
Titel
|
|
|
sehe ich das richtig? du hast in deinem Post schon die Lösung gepostet - war das dein edit?
|
|
| |
|
|
|
Anzeige
|
|
|
flavio
Threadersteller
Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht:
|
Verfasst So 17.10.2010 17:50
Titel
|
|
|
es läuft nicht
der nummernblock des zweiten slide wird einfach am ersten angehangen.
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst So 17.10.2010 19:06
Titel
|
|
|
| flavio hat geschrieben: | es läuft nicht
der nummernblock des zweiten slide wird einfach am ersten angehangen. |
Du sagst ihm, das Teil hat die ID "control2", benutzt im CSS aber "#controls1"?
Evtl liegts ja daran? 
|
|
| |
|
|
flavio
Threadersteller
Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht:
|
Verfasst So 17.10.2010 19:28
Titel
|
|
|
nee mit id "controls1" geht es auch nicht.
der edit button fehlt hier.
muss ich vleicht was in der Konfiguration ändern?
| Code: | (function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Zurück',
nextId: 'nextBtn',
nextText: 'Weiter',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: true,
numeric: false,
numericId: 'controls'
}; |
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst So 17.10.2010 20:13
Titel
|
|
|
Zeig doch mal den kompletten status quo - mit einzelnen Schnipseln kann ja keiner was anfangen bzw testen...
Ich würde dir eh empfehlen, sowas händisch zu machen.
Du benutzt bestimmt 60 KB an sinnlosem JavaScript, das den Speicher mit endlos vielen Closures vollspammt.
Schön ist was anderes - diese Funktion bekommst du mit selbst gebautem JS in 10 Zeilen hin.
Danach weißt du außerdem, wo das Problem liegt, wenn es eines gibt, wo du anlangen musst, wenn du was ändern willst und kannst stolz darauf sein, etwas vollbracht zu haben - Lego ist für Kinder... Die Mausschubster-Abteilung ist weiter oben 
|
|
| |
|
|
flavio
Threadersteller
Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht:
|
Verfasst So 17.10.2010 22:27
Titel
|
|
|
der status quo ist nicht online. das js ist 7 kb
Easy Slider 1.7 - jQuery plugin
| Code: | /*
/*
* 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: 'Zurück',
nextId: 'nextBtn',
nextText: 'Weiter',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: true,
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);
|
header
| Code: | <script type="text/javascript" src="<?php bloginfo('template_directory');?> /js/easySlider1.7.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#slider").easySlider(
);
$j("#slider1").easySlider(
);
});
</script> |
html
| Code: |
<div id="table">
<div id="slider">
<ul>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_011.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-488" />
</li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_021.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-489" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_031.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-490" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_041.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-491" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_05.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-492" /></li>
</ul>
</div>
</div>
<div id="table">
<div id="slider1">
<ul>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_011.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-488" />
</li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_021.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-489" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_031.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-490" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_041.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-491" /></li>
<li><img src="http://127.0.0.1/wordpress_2.8/wp-content/uploads/2010/04/dummy_slider_05.png" alt="" title="" width="515" height="350" class="alignnone size-full wp-image-492" /></li>
</ul>
</div>
</div> |
css
| Code: | #slider ul, #slider li,
#slider1 ul, #slider1 li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li,
#slider1, #slider1 li
{
/*
define width and height of container element and list item (slide)
list items must be the same size as the slider area
*/
width:515px;
height:350px;
margin:0px 0px 0px 0px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
ol#controls,
ol#controls1{
margin:0em 0;
margin-left:0px;
padding:0;
height:11px;
}
ol#controls li,
ol#controls1 li{
margin:0 2px 0 0;
padding:0;
float:left;
list-style:none;
height:11px;
line-height:8px;
}
ol#controls li a,
ol#controls1 li a{
float:left;
height:11px;
line-height:10px;
background:#e8e8e8;
color:#555;
padding:0 5px;
text-decoration:none;
}
ol#controls li.current a,
ol#controls1 li.current a{
background:#34869a;
color:#fff;
}
ol#controls li a:focus, a:hoover, #prevBtn a:focus, #nextBtn a:focus,
ol#controls1 li a:focus, a:hoover, #prevBtn1 a:focus, #nextBtn1 a:focus{outline:none;
background:#8bd140;} |
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 18.10.2010 08:08
Titel
|
|
|
| Code: | 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);
});
}; |
Da liegt der Hund begraben.
Du nennst deine 2. Leiste "controls1" - das Script macht aber erstmal aus "controls" ein "controls1" - deswegen wirds an dem ersten dran gehangen.
Nennst du deinen 2. "coltrols2" müssts gehn.
/* edit:
| flavio hat geschrieben: | | ... das js ist 7 kb ... |
und die jquery.js hat bei mir noch 56 KB ^^ */
Zuletzt bearbeitet von fyll am Mo 18.10.2010 08:14, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery multiple slider in 5 Bereichen
Image slider
Suche Image Slider
Image Slider für Background Images
Responsive Image Slider mit versch. Bildgrößen
ist dieser image slider open source?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
