You last visited: Today at 03:48
Advertisement
Problem mit Slideshow
Discussion on Problem mit Slideshow within the Web Development forum part of the Coders Den category.
10/04/2012, 09:11
#1
elite*gold: 0
Join Date: Feb 2012
Posts: 2,107
Received Thanks: 651
Problem mit Slideshow
Hallo,
ich habe bei mir auf der Seite ein Problem mit der Slideshow, undzwar zeigt er mir das Bild an, aber die Buttons für "
Prev/Next " nicht.
hier mal die js:
Code:
$(function(){
$('.slider').mobilyslider({
content: '.sliderContainer',
children: 'div',
transition: 'horizontal',
animationSpeed: 500,
autoplay: false,
autoplaySpeed: 3000,
pauseOnHover: false,
bullets: false,
arrows: true,
arrowsHide: false,
prev: 'arrowLeft',
next: 'arrowRight',
animationStart: function(){},
animationComplete: function(){}
});
});
(function($){$.fn.mobilyslider=function(options){var defaults={content:".sliderContent",children:"div",transition:"horizontal",animationSpeed:300,autoplay:false,autoplaySpeed:3000,pauseOnHover:false,bullets:true,arrows:true,arrowsHide:true,prev:"prev",next:"next",animationStart:function(){},animationComplete:function(){}};var sets=$.extend({},defaults,options);return this.each(function(){var $t=$(this),item=$t.children(sets.content).children(sets.children),l=item.length-1,w=item.width(),h=item.height(),step=0,play,bullets,arrows,z,active,bullet;var slider={init:function(){slider.data();if(sets.bullets){slider.bullets.create()}if(sets.arrows){slider.arrows.create()}if(sets.autoplay){slider.autoplay()}slider.triggers()},data:function(){item.each(function(i){$(this).css("z-index",-(i-l))});if(sets.transition=="fade"){item.hide().eq(0).show()}},zindex:{prev:function(){step==l?item.eq(0).css("z-index",l+3):item.css("z-index",l+1);item.eq(step).css("z-index",l+4).next(item).css("z-index",l+2)},next:function(){item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)},bullets:function(){item.css("z-index",l+1).eq(active).css("z-index",l+2);item.eq(step).css("z-index",l+3)},trigger:function(){if(z==1){slider.zindex.next()}else{if(z==-1){slider.zindex.prev()}else{if(z==0){slider.zindex.bullets()}}}}},slide:{left:function(sign){sets.animationStart.call(this);item.stop(true, true).eq(step).animate({left:sign+"="+w},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({left:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},top:function(sign){sets.animationStart.call(this);item.stop(true, true).eq(step).animate({top:sign+"="+h},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({top:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},fade:function(){sets.animationStart.call(this);item.stop(true, true).fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function(){sets.animationComplete.call(this)})}},animation:{previous:function(){step==0?step=l:step--;z=-1;switch(sets.transition){case"horizontal":slider.slide.left("-");break;case"vertical":slider.slide.top("+");break;case"fade":slider.slide.fade();break}},next:function(){step==l?step=0:step++;z=1;switch(sets.transition){case"horizontal":slider.slide.left("+");break;case"vertical":slider.slide.top("-");break;case"fade":slider.slide.fade();break}}},autoplay:function(){play=setInterval(function(){slider.animation.next();if(sets.bullets){setTimeout(function(){slider.bullets.update()},sets.animationSpeed+300)}},sets.autoplaySpeed)},pause:function(){clearInterval(play)},bullets:{create:function(){$t.append($("<div />").addClass("sliderBullets"));bullets=$t.find(".sliderBullets");for(i=0;i<=l;i++){bullets.append($("<a />").attr({href:"#",rel:i}).text(i))}},trigger:function(){bullet=bullets.find("a");bullet.eq(0).addClass("active");bullet.click(function(){var b=$(this),rel=b.attr("rel");active=bullet.filter(".active").attr("rel");step=rel;sign=rel>active?"+":"-";z=0;if(!b.hasClass("active")){switch(sets.transition){case"horizontal":slider.slide.left(sign);break;case"vertical":slider.slide.top(sign);break;case"fade":slider.slide.fade();break}}bullet.removeClass("active");b.addClass("active");return false})},update:function(){bullet.removeClass("active").eq(step).addClass("active")}},arrows:{create:function(){$t.append($("<div />").addClass("sliderArrows"));arrows=$t.find(".sliderArrows");arrows.append($("<a />").attr("href","#").addClass(sets.prev).text("Previous"));arrows.append($("<a />").attr("href","#").addClass(sets.next).text("Next"))},trigger:function(){arrows.find("."+sets.prev).click(function(){slider.animation.previous();if(sets.bullets){slider.bullets.update()}return false});arrows.find("."+sets.next).click(function(){slider.animation.next();if(sets.bullets){slider.bullets.update()}return false});if(sets.arrowsHide){arrows.hide();$t.hover(function(){arrows.show()},function(){arrows.hide()})}}},triggers:function(){if(sets.arrows){slider.arrows.trigger()}if(sets.bullets){slider.bullets.trigger()}if(sets.pauseOnHover){$t.hover(function(){slider.pause()},function(){slider.autoplay()})}}};slider.init()})}}(jQuery));
Einrtag in der HTML
Code:
<div class="slider">
<div class="sliderContainer">
<div class="item"><img src="http://www.elitepvpers.com/forum/images/slider/bild1.png" alt="Bild" /></div>
<div class="item"><img src="http://www.elitepvpers.com/forum/images/slider/bild1.png" alt="Bild" /></div>
</div>
</div>
und hier der CSS eintrag:
Code:
.slider {background:url('../images/slider/slider_bg.png') no-repeat;width:664px;height:178px;padding:5px;margin-bottom:25px;}
.sliderContainer {width:654px; height:168px; position:relative; overflow:hidden; outline:none;}
.sliderArrows a {width:42px; height:42px; background-image:url('../images/slider/prev_next.png'); text-indent:-9999px; outline:none; z-index:50; position:absolute; top:50%; margin-top:-22px;}
.arrowLeft {left:10px; background-position:left top;} .arrowLeft:hover {background-position:left bottom;}
.arrowRight {right:10px; background-position:right top;} .arrowRight:hover {background-position:right bottom;}
.sliderContainer .item {width:653px; height:168px; position:absolute; background:#e5e5e5; border:1px;border-radius:10px;}
Hoffe einer kann mir helfen, wer es geschafft hat, bekommt 25e*Gold als
kleines Dankeschön
MfG
Schmizi'
10/04/2012, 11:38
#2
elite*gold: 0
Join Date: Sep 2005
Posts: 427
Received Thanks: 87
Buttons sind via CSS/JS definiert aber nicht im HTML eingebaut ?
Wenn eine Onlineversion bereits existiert, Firebug oder äquivalent benutzen um das JS zu analysieren.
10/04/2012, 12:14
#3
elite*gold: 0
Join Date: Feb 2012
Posts: 2,107
Received Thanks: 651
der buttons werden ja mit der js da hingemacht.
bei meiner alten website hat es ja geklappt, habe es dann in der neuen eingefügt ( C&P ) angepasst, klappt aber nciht
Hast du vllt nen anderen Slieder der so ähnlich ist ( auch ohne buttons )?
10/04/2012, 12:34
#4
elite*gold: 0
Join Date: Sep 2005
Posts: 427
Received Thanks: 87
10/04/2012, 13:50
#5
elite*gold: 0
Join Date: Feb 2012
Posts: 2,107
Received Thanks: 651
#closerequest
Problem selber gelöst bekommen, habe mich beim div verschrieben xD
Similar Threads
http://www.avaaz.org/de/eu_save_the_internet_spread/?slideshow
01/28/2012 - Main - 1 Replies
Avaaz - ACTA: Die neue Gefahr fürs Netz
GEGEN INTERNET ZENSUR / Totale INTERNET überwachung
Suche slideshow
02/06/2011 - Flyff Private Server - 2 Replies
hallo e pvp
ich poste es hier da ich es hier poste und die konkorentz mit in letzter zeit immer zu viel gehackt wird
ich suche eine slide show wie bei denen homapges hier ich finde die einfach so geil mit dem rum schwingen ich finde das krass kann die mir vileicht einer geben oder sagen wie ich sie kriege
weil ich habe sie versucht zu basteln aus deren quel cod aber funtzt net wirklich
naja
How to create Father's Day DVD Slideshow
06/15/2009 - Tutorials - 0 Replies
The third Sunday in June is Father's Day for Americans. We don't need more words to tell how important our fathers are in our family. On Father's Day, do what you can to show your gratitude to your father, and honor the memories you have lived together with your father and bring it back to life.
Making Father's Day DVD slideshow is a good Father's Day idea to show your emotions. Gather up pictures of yesterday and maybe 10 years ago, display them chronologically on slideshow DVD, using...
All times are GMT +2. The time now is 03:48 .