Widget:Slides: Difference between revisions

From Elwiki
mNo edit summary
mNo edit summary
 
(16 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 ul {
    position: relative;
    padding: 0;
    margin: 0;
}
.slideshow ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}
}


.slideshow .ss_nav {
.slideshow .ss_nav {
    position: absolute;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 50px;
}
}


.slideshow .ss_nav li {
.slideshow .ss_nav span {
    position: absolute;
     width: 50%;
     width: 50px;
     height: 50px;
     height: 50px;
    line-height: 50px;
     font-size: 50px;
     font-size: 50px;
     text-align: center;
     text-align: center;
    line-height: 50px;
    top: 50%;
    margin-top: -25px;
    z-index: 99999;
}
}


Line 43: Line 29:
}
}


.slideshow .ss_content {
.slideshow .ss_contents {
     width: 100%;
     width: 100%;
    height: 100%;
}
}


.slideshow .ss_content li {
.slideshow .ss_contents .ss_content {
     position: relative;
     position: relative;
     float: left;
     float: left;
    width: 100%;
}
}
</style>
</style>
Line 56: 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('.ss_content:first').children('li').not(':hidden'),
             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('li').fadeIn(500);
             current.hide().prev('.ss_content').fadeIn(500);
         }
         }
         else if(loop){
         else if(loop){
             current.hide().siblings(':last-child').fadeIn(500);
             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('.ss_content:first').children('li').not(':hidden'),
             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('li').fadeIn(500);
             current.hide().next('.ss_content').fadeIn(500);
         }
         }
         else if(loop){
         else if(loop){
             current.hide().siblings(':first-child').fadeIn(500);
             current.hide().siblings('.ss_content:first').fadeIn(500);
         }
         }
     });
     });
     $('.ss_content li:first-child').siblings().hide();
     $('.ss_contents .ss_content:first').siblings('.ss_content').hide();
});
});
</script>
</script>
<!--{/if}--><includeonly>

Latest revision as of 03:55, 25 September 2015