[Résolu] How to reset a slideshow. - Goal : re-open the slideshow restart it at the first picture. par Laurent_dchtl - page 1

Hi everybody :D,

I try to reset my slideshow when I close it but I fail.

I try some "If +slideshow+ = false, then array = 0" but fail.

I try simply "If +slideshow+ = false, then (array).[0]reset" but fail.

I try lot of thing but fails.

I just want to create an effect inwich, when I close then re-open the slideshow its restart at the first picture.

Here my Code,

JS *jQuery* :

/*  Jquery ready start  */
$(document).ready(function() {
/*  Jquery ready start  */
$(".show-panel").click(function(){
    $(".slider, .containers").fadeIn(300);
    $(".close-panel").fadeIn(300);
   var currentIndex = 0,
  items = $('.containers div'),
  itemAmt = items.length;
function cycleItems() {
  var item = $('.containers div').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);
  });
     $(".close-panel").click(function(){
    $(".slider, .containers").fadeOut(300);
    $(".close-panel").fadeOut(300);
    $( ".containers" ).empty();
    console.log ("everythings is empty !!") ; 
  });
    $(".close-panel").click(function() {
                $(".containers div")[0].reset();
        });
/*
$('.next').click(function() {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});
$('.prev').click(function() {
  clearInterval(autoSlide);
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
}); */
/*  Jquery ready end   */
    });
/* Jquery ready end */

CSS

body{
  margin:150px 0 0 0;
  text-align:center;
  background: #f1e7b0;
}
/* footer set */
/* footer set */
/* footer set */
html, body {
    margin : 0 ;
    padding: 0;
    display : table;
    height : 100% ;
    width : 100% ;
}
footer {
    display : table-row ;
    height : 1px;
    background-color : #aaa ; 
}
/* footer set */
/* footer set */
/* footer set */
.show-panel, .close-panel {
  right : 20% ;
  left : 20% ; 
}
.slider {
   display:none;
  background: rgba(0,0,0,0.8);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
  padding : 0 ;
    overflow : hidden ;
}
.containers div {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:rgba (0,0,0,0.8);
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
  padding : 0 ;
  border : none ;
  border-radius: 25px;
}
#firstPicture
{
 display : inline-block ;
 border-radius: 25px;
}
.close-panel {
  color :#FFFF7F ;
  opacity : 0.3;
 width : 100px;
 margin : auto ;
 padding : auto ;
}

HTML

 <!Doctype html >
<html>
      <head>
      <meta charset="UTF-8">
      <title> jQueryTraining </title>
     <!-- call jQuery based libraries -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
     <!-- call jQuery plugin for code effects -->
      <script type="text/javascript" src="jquery.autosize.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
      <script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
      <link type="text/css" href="jquery.mCustomScrollbar.css" rel="stylesheet" media="all" /> 
     <script src="jquery.splitter.js"></script>
     <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
     <link type="text/css" href="lightcase.css" rel="stylesheet" media="all" />
     <script src="lightcase.js"></script>
 <!-- call based files for the code -->
      <link href='sliderPopUp.css' rel='stylesheet' type='text/css'/>  
      <link id="wide" rel="stylesheet" href="wide.css" type="text/css" /> 
      <script type="text/javascript" src="sliderPopUp.js"></script>
      <script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
    </head>
      <body>
   <div class="show-panel" > SHOW HERE
 </div>
 <div class="slider">
  <div class="containers">
   <div id="firstPicture">
    <span class="close-panel">CLOSE HERE </span>
     <img src="https://placeimg.com/400/200/any"/>
    </div>
    <div>
     <span class="close-panel">CLOSE HERE </span>
      <img src="https://placeimg.com/400/200/nature"/>
    </div>
    <div>
     <span class="close-panel">CLOSE HERE </span>
      <img src="https://placeimg.com/400/200/architecture"/>
    </div>
    <div>
     <span class="close-panel">CLOSE HERE </span>
      <img src="https://placeimg.com/400/200/animals"/>
    </div>
    <div>
     <span class="close-panel">CLOSE HERE </span>
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
     <span class="close-panel">CLOSE HERE </span>
      <img src="https://placeimg.com/400/200/tech"/>
    </div>
      </div>
    </div>
   <!-- 
    <div id="slide">
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
     <img src="https://placeimg.com/400/200/any"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/nature"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/architecture"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/animals"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/tech"/>
    </div>
  </div>
  -->
     </body>
<footer>
   <div class="container">
      footer content 
   </div>
</footer>
</html>

Thank you for your reading,

Laurent

-
Edité par Laurent_dchtl 28 novembre 2017 à 2:15:22

Laurent_dchtl

12 novembre 2017 à 0:42:11

AbcAbc6

12 novembre 2017 à 4:24:41

Hello, I move in the forum in English, to insert code on this forum, please use the code button </> provided for this purpose, choosing the right language, which activates syntax highlighting. This will be more readable for everyone.
I invite you to edit your message.

28 novembre 2017 à 2:07:27

Hello AbcAbc6,

all right :magicien: ,

Have a nice day

-
Edité par Laurent_dchtl 28 novembre 2017 à 2:13:03

How to reset a slideshow.

Goal : re-open the slideshow restart it at the first picture.

How to reset a slideshow.

Supprimer

Modérer

Signaler le message aux modérateurs