Widget:Slides: Difference between revisions
From Elwiki
mNo edit summary |
mNo edit summary |
||
| (18 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<style> | <includeonly><!--{if !isset($wgSlideshow) || !$wgSlideshow}--> | ||
<!--{assign var="wgSlideshow" value=true scope="global"}--> | |||
<style type="text/css"> | |||
.slideshow { | .slideshow { | ||
position: relative; | position: relative; | ||
background-color: orange; | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.slideshow . | .slideshow .ss_nav { | ||
width: 100%; | |||
height: 50px; | |||
} | |||
.slideshow .ss_nav span { | |||
width: 50%; | |||
height: 50px; | |||
line-height: 50px; | |||
font-size: 50px; | |||
text-align: center; | |||
} | |||
.slideshow .ss_nav .ss_prev { | |||
left: 0; | |||
} | |||
.slideshow .ss_nav .ss_next { | |||
right: 0; | |||
} | |||
.slideshow .ss_contents { | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
} | |||
.slideshow .ss_contents .ss_content { | |||
position: relative; | |||
float: left; | |||
width: 100%; | |||
} | } | ||
</style> | </style> | ||
<script> | |||
$(function(){ | |||
$('.ss_prev').click(function(){ | |||
var loop = $(this).parent().parent().hasClass('loop'), | |||
current = $(this).parent().siblings('.ss_contents:first').children('.ss_content').not(':hidden'), | |||
width = current.width(); | |||
if(!current.is(':first-child')){ | |||
current.hide().prev('.ss_content').fadeIn(500); | |||
} | |||
else if(loop){ | |||
current.hide().siblings('.ss_content:last').fadeIn(500); | |||
} | |||
}); | |||
$('.ss_next').click(function(){ | |||
var loop = $(this).parent().parent().hasClass('loop'), | |||
current = $(this).parent().siblings('.ss_contents:first').children('.ss_content').not(':hidden'), | |||
width = current.width(); | |||
if(!current.is(':nth-last-child(2)')){ | |||
current.hide().next('.ss_content').fadeIn(500); | |||
} | |||
else if(loop){ | |||
current.hide().siblings('.ss_content:first').fadeIn(500); | |||
} | |||
}); | |||
$('.ss_contents .ss_content:first').siblings('.ss_content').hide(); | |||
}); | |||
</script> | |||
<!--{/if}--><includeonly> | |||
