Home Images Slideshow after clicked on modal box
Reply: 0

Images Slideshow after clicked on modal box

Rachel Ben-Ratzon
1#
Rachel Ben-Ratzon Published in 2018-01-13 10:03:26Z

I tried everything but I do not understand how to make the front images (the images that come to the front after I click the modal box) to slideshow and not the image on the back, because as you can guess it moves the image on the back slideshow.

I think the problem is with the "class" "myslides" when I call the second slideshow script it uses the same class myslides as the first one but I have no idea how to solve this.

I also added snippet of my code:

/* Universal reset: */
*{
	margin: 0;
	padding: 0;
}

/* Body CSS (Background image, font) */
body{
	font-size: 0.825em;
	background-image: url(img/Background_Image.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
	font-family: Arial, Helvetica, sans-serif;
}

.img-logo {
  position: relative;
  top: 37px;
  float: left;
  width: 100px;
  height: 100px;
  background: #fcfcfc00;
  right: 25px;
}


h2{
	font-family: David;
	text-decoration: ;
	font-size: 2.2em;
	font-weight: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #000000;

}

p{
	font-family: Arial;
	line-height: 1.5em;
	padding-bottom: 1em;
}


.clear:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	
}

#page{
	width:960px;
	margin:0 auto;
	position:relative;
}
article{
	background-color:#ffffffe0;
	margin:3em 0;
	padding:20px;
    border:1px solid #00000094;
    /* black Transerent #a29b94a3 */
}
figure{
	border:1px solid #142830;
	float:right;
	height:300px;
	margin-left:15px;
	overflow:hidden;
	width:500px;
}

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
/*Dot For Slide*/
.mySlides {display:none } 
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0 }

/* W3.CSS 4.08 January 2018 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%; cursor:pointer; height:15px;width:15px;padding:0}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none}.w3-show-block,.w3-show{display:block}.w3-show-inline-block{display:inline-block}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none}.w3-mobile{display:block;width:100%}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none}.w3-sidebar.w3-collapse{display:block}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0;margin-right:0}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px}.w3-small{font-size:12px}.w3-medium{font-size:15px}.w3-large{font-size:25px; font-weight:bold}
.w3-xlarge{font-size:24px}.w3-xxlarge{font-size:36px}.w3-xxxlarge{font-size:48px}.w3-jumbo{font-size:64px}
.w3-left-align{text-align:left}.w3-right-align{text-align:right}.w3-justify{text-align:justify}.w3-center{text-align:center}
.w3-border-0{border:0!}.w3-border{border:1px solid #ffffff}
/* #ccc transparent color */
.w3-border-top{border-top:1px solid #ccc}.w3-border-bottom{border-bottom:1px solid #ccc}
.w3-border-left{border-left:1px solid #ccc}.w3-border-right{border-right:1px solid #ccc}
.w3-topbar{border-top:6px solid #ccc}.w3-bottombar{border-bottom:6px solid #ccc}
.w3-leftbar{border-left:6px solid #ccc}.w3-rightbar{border-right:6px solid #ccc}
.w3-section,.w3-code{margin-top:50px;margin-bottom:50px}
.w3-margin{margin:16px}.w3-margin-top{margin-top:16px}.w3-margin-bottom{margin-bottom:16px}
.w3-margin-left{margin-left:16px}.w3-margin-right{margin-right:16px}
.w3-padding-small{padding:4px 8px}.w3-padding{padding:8px 16px}.w3-padding-large{padding:12px 24px}
.w3-padding-16{padding-top:16px;padding-bottom:16px}.w3-padding-24{padding-top:24px;padding-bottom:24px}
.w3-padding-32{padding-top:32px;padding-bottom:32px}.w3-padding-48{padding-top:48px;padding-bottom:48px}
.w3-padding-64{padding-top:64px;padding-bottom:64px}
.w3-left{float:left; cursor:pointer}.w3-right{float:right; cursor:pointer}

.w3-button:hover{color:#000;background-color:#ffffffe0}

.w3-transparent,.w3-hover-none:hover{color:#fff; background-color:transparent}
.w3-hover-none:hover{box-shadow:none}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000;background-color:#ffc107}
.w3-aqua,.w3-hover-aqua:hover{color:#000;background-color:#00ffff}
.w3-blue,.w3-hover-blue:hover{color:#fff;background-color:#2196F3}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000;background-color:#87CEEB}
.w3-brown,.w3-hover-brown:hover{color:#fff;background-color:#795548}
.w3-cyan,.w3-hover-cyan:hover{color:#000;background-color:#00bcd4}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff;background-color:#607d8b}

.w3-white,.w3-hover-white:hover{color:#000;background-color:#fff}

.w3-black,.w3-hover-black:hover{color:#fff;background-color:#000}
<!DOCTYPE html> <!-- The new doctype -->
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Cook,Food">
        <meta name="author" content="Shaked Benratzon">
 	    <title>Cooking Club | Gourmet Food in Your Kitchen</title>
 				<!-- Favicon Website -->
        <link rel="shortcut icon" href="img/Icon_Image.ico" type="image/x-icon">
		
		<!--Script Links -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                <style>


	</style>
      </head>
    
    <body>
    	
    	<section id="page"> <!-- Defining the #page section with the section tag -->
    
            <header> <!-- Defining the header section of the page with the appropriate tag -->
            
                <hgroup>

				
      		
                </hgroup>
                                
          
            </header>
            
            <section id="articles"> <!-- A new section with the articles -->

				<!-- Article 1 start -->  
                
                <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                    <h2>Some text </h2>
                    
                    <div class="articleBody clear">
                    
                    	<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
							
						<!-- Image to Slide -->
						<div class="w3-content w3-display-container">
						
						<img class="mySlides myImg"  src="https://images8.alphacoders.com/826/thumb-1920-826259.jpg" alt="Pasta, Tasty" width="620" height="340">
						<img class="mySlides myImg"  src="https://www.w3schools.com/w3images/lights.jpg" alt="Pasta, Special" width="620" height="340">
						<img class="mySlides myImg"  src="https://www.w3schools.com/howto/img_fjords.jpg" alt="Pasta, Appetizing" width="620" height="340">

		
						<!-- Make Buttons -->
						<div class="w3-large w3-text-white ">
						<button class="w3-button w3-transparent w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
						<button class="w3-button w3-transparent w3-display-right" onclick="plusDivs(1)">&#10095;</button>
						</div>
						<!--Make Dots -->
					    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
						<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
                        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
                        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
						</div>
						
						<!-- The Modal -->
						<div id="myModal" class="modal">
						<!-- The Close Button -->
						<span class="close">&times;</span>
    					<!-- Modal Content (The Image) -->
						<img class="modal-content" id="img01">
						<!-- Modal Caption (Image Text) -->
						<div id="caption"></div>
                        
                        
						<!-- Make Buttons -->
						<div class="w3-large w3-text-white ">
						<button class="w3-button w3-transparent w3-display-left" onclick="plusDivs4(-1)">&#10094;</button>
						<button class="w3-button w3-transparent w3-display-right" onclick="plusDivs4(1)">&#10095;</button>
						</div>
						<!--Make Dots -->
					    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
						<span class="w3-badge demo4 w3-border w3-transparent w3-hover-white" onclick="currentDiv4(1)"></span>
                        <span class="w3-badge demo4 w3-border w3-transparent w3-hover-white" onclick="currentDiv4(2)"></span>
                        <span class="w3-badge demo4 w3-border w3-transparent w3-hover-white" onclick="currentDiv4(3)"></span>
                        
                        
                        
                        
                   		 <script>
						// Get the modal
						var modal = document.getElementById('myModal');

						// Get the image and insert it inside the modal - use its "alt" text as a caption
						var img = $('.myImg');
						var modalImg = $("#img01");
						var captionText = document.getElementById("caption");
						$('.myImg').click(function(){
							modal.style.display = "block";
							var newSrc = this.src;
							modalImg.attr('src', newSrc);
							captionText.innerHTML = this.alt;
						});

						// Get the <span> element that closes the modal
						var span = document.getElementsByClassName("close")[0];

						// When the user clicks on <span> (x), close the modal
						span.onclick = function() {
						  modal.style.display = "none";
						  						  
						}

					 </script>     
                        
                        
                        			 <!-- Slider Image Script -->
					 <script>
					 var slideIndex4 = 1;
					 showDivs4(slideIndex4);

					 function plusDivs4(n) {
					 showDivs4(slideIndex4 += n);
					 }

					 function currentDiv4(n) {
					 showDivs4(slideIndex4 = n);
					 }

					 function showDivs4(n) {
					 var i;
					 var x = document.getElementsByClassName("mySlides");
					 var dots4 = document.getElementsByClassName("demo4");
					 if (n > x.length) {slideIndex4 = 1}    
					 if (n < 1) {slideIndex4 = x.length}
					 for (i = 0; i < x.length; i++) {
						 x[i].style.display = "none";  
					  }
					 for (i = 0; i < dots4.length; i++) {
					 dots4[i].className = dots4[i].className.replace(" w3-white", "");
					 }
					 x[slideIndex4-1].style.display = "block";  
					 dots4[slideIndex4-1].className += " w3-white";
					 }
					 </script>
						</div>
						
                        
						</div>

			
						
					 <!-- Slider Image Script -->
					 <script>
					 var slideIndex = 1;
					 showDivs(slideIndex);

					 function plusDivs(n) {
					 showDivs(slideIndex += n);
					 }

					 function currentDiv(n) {
					 showDivs(slideIndex = n);
					 }

					 function showDivs(n) {
					 var i;
					 var x = document.getElementsByClassName("mySlides");
					 var dots = document.getElementsByClassName("demo");
					 if (n > x.length) {slideIndex = 1}    
					 if (n < 1) {slideIndex = x.length}
					 for (i = 0; i < x.length; i++) {
						 x[i].style.display = "none";  
					  }
					 for (i = 0; i < dots.length; i++) {
					 dots[i].className = dots[i].className.replace(" w3-white", "");
					 }
					 x[slideIndex-1].style.display = "block";  
					 dots[slideIndex-1].className += " w3-white";
					 }
					 </script>
					 </div>
						
                        </figure>
                        
                        <p>Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text.</p>
                        <p>SSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text </p>
                    </div>
                </article>
                
				<!-- Article 1 end -->
    

		
    </body>
	
	
</html>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305903 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO