responsive diagonal slideshow plugin

foo123 · Apr 1, 2020 · 477bdc8 · 477bdc8
1 parent 85c674a
commit 477bdc8
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 259 deletions.
diff --git a/diagonal-slideshow/diagonal-slideshow.css b/diagonal-slideshow/diagonal-slideshow.css
@@ -1,31 +1,44 @@
 .diag-container
 {
-padding:0;
+    position:relative;
+    display:block;
+    margin:0;
+    padding:0;
+    border:0;
+    box-sizing:border-box;
+    overflow:hidden !important;
 }
-ul.diag-list {
-list-style-type:none;
-position:relative;
+.diag-container > .diag
+{
+    position:absolute;
+    display:block;
+    margin:0;
+    padding:0;
+    border:0;
+    border:1px solid rgba(255,255,255,0.7);
+    box-sizing:border-box;
+    overflow:hidden !important;
+    transform-origin:center center;
+    transform:rotate(-45deg);
 }
-ul.diag-list li {
-border: 1px solid #aaa;
-overflow: hidden;
-position: absolute;
--moz-transform: rotate(-45deg);  
--o-transform: rotate(-45deg);  
--webkit-transform: rotate(-45deg);  
--ms-transform: rotate(0deg);  
-transform: rotate(-45deg);  
--ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, 			M22=0.70710678,sizingMethod='auto expand')";
-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand');		
-list-style-type:none;
+.diag > .diag-inside
+{
+    position:absolute;
+    display:block;
+    margin:0;
+    padding:0;
+    border:0;
+    box-sizing:border-box;
+    overflow:hidden !important;
+    transform-origin:center center;
+    transform:rotate(45deg);
+    z-index:10;
+    background-image:none;
+    background-position:0 0;
+    background-repeat:no-repeat;
+    background-size:100% auto;
 }
-
-ul.diag-list li .diag-inside{
-position: absolute;
-cursor: pointer;
--moz-transform: rotate(45deg);  
--o-transform: rotate(45deg);  
--webkit-transform: rotate(45deg);  
--ms-transform: rotate(45deg);  
-transform: rotate(45deg);	
+.diag > .diag-remove
+{
+    z-index:0 !important;
 }
diff --git a/diagonal-slideshow/diagonal-slideshow.html b/diagonal-slideshow/diagonal-slideshow.html
@@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="diagonal-slideshow.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="../jquery/jquery.js"></script>
 <script type="text/javascript" src="diagonal-slideshow.js"></script>
-<link href="diagonal-slideshow.css" rel="stylesheet" type="text/css" />
-<title>Diagonal Slideshow with jQuery and CSS3</title>
+<title>Responsive Diagonal Slideshow with jQuery and CSS3</title>
 </head>
-<body bgcolor="#121212">
-<div id="wrapper">
-</div>
+<body style="background-color:#121212;color:#efefef;">
+<div id="slideshow" style="position:relative;width:100%;max-width:1200px;margin:0 auto;"></div>
 <script type="text/javascript">
-jQuery("#wrapper").diagonalSlideshow({
-width:700,
-height:438,
-strict:true,
-images:['../img/d2.jpg','../img/d3.jpg','../img/d4.jpg']
+jQuery("#slideshow").diagonalSlideshow({
+    aspectRatio: 700/438,
+    images: ['../img/d2.jpg','../img/d3.jpg','../img/d4.jpg']
 });
 </script>
 </body>