Widget:Slides: Difference between revisions
From Elwiki
mNo edit summary |
mNo edit summary |
||
| (15 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; | background-color: orange; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.slideshow .ss_nav { | .slideshow .ss_nav { | ||
width: 100%; | width: 100%; | ||
height: | height: 50px; | ||
} | } | ||
.slideshow .ss_nav | .slideshow .ss_nav span { | ||
width: 50%; | |||
width: | |||
height: 50px; | height: 50px; | ||
line-height: 50px; | |||
font-size: 50px; | font-size: 50px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| Line 44: | Line 29: | ||
} | } | ||
.slideshow . | .slideshow .ss_contents { | ||
width: 100%; | width: 100%; | ||
height: 100%; | |||
} | } | ||
.slideshow .ss_content | .slideshow .ss_contents .ss_content { | ||
position: relative; | position: relative; | ||
float: left; | float: left; | ||
width: 100%; | |||
} | } | ||
</style> | </style> | ||
| Line 57: | Line 44: | ||
$('.ss_prev').click(function(){ | $('.ss_prev').click(function(){ | ||
var loop = $(this).parent().parent().hasClass('loop'), | var loop = $(this).parent().parent().hasClass('loop'), | ||
current = $(this).parent().siblings('. | current = $(this).parent().siblings('.ss_contents:first').children('.ss_content').not(':hidden'), | ||
width = current.width(); | width = current.width(); | ||
if(!current.is(':first-child')){ | if(!current.is(':first-child')){ | ||
current.hide().prev(' | current.hide().prev('.ss_content').fadeIn(500); | ||
} | } | ||
else if(loop){ | else if(loop){ | ||
current.hide().siblings(':last | current.hide().siblings('.ss_content:last').fadeIn(500); | ||
} | } | ||
}); | }); | ||
$('.ss_next').click(function(){ | $('.ss_next').click(function(){ | ||
var loop = $(this).parent().parent().hasClass('loop'), | var loop = $(this).parent().parent().hasClass('loop'), | ||
current = $(this).parent().siblings('. | current = $(this).parent().siblings('.ss_contents:first').children('.ss_content').not(':hidden'), | ||
width = current.width(); | width = current.width(); | ||
if(!current.is(':last-child')){ | if(!current.is(':nth-last-child(2)')){ | ||
current.hide().next(' | current.hide().next('.ss_content').fadeIn(500); | ||
} | } | ||
else if(loop){ | else if(loop){ | ||
current.hide().siblings(':first | current.hide().siblings('.ss_content:first').fadeIn(500); | ||
} | } | ||
}); | }); | ||
$('.ss_content | $('.ss_contents .ss_content:first').siblings('.ss_content').hide(); | ||
}); | }); | ||
</script> | </script> | ||
<!--{/if}--><includeonly> | |||
