Реализация нескольких миниатюр для нескольких слайдов javascript / jQuery - PullRequest
Новая
       12

Реализация нескольких миниатюр для нескольких слайдов javascript / jQuery

0 голосов
/ 20 декабря 2018

Я делаю свое онлайн-портфолио, и я делаю одну страницу с несколькими слайд-шоу и миниатюрами для каждого проекта

Теперь я столкнулся с несколькими проблемами при наличии нескольких слайд-шоу на одной странице, разные классы длякаждый слайд и т. д. Я нашел веб-страницу, где я мог проверить javascrip и заставить работать мое слайд-шоу, но не миниатюры, после исследования и попытки понять «Как?» и «Почему?», я бросил пытаться в одиночку, так как ясовершенно новый для javascript и jQuery, он требует много времени и усилий.

Пожалуйста, проверьте код ниже ... Надеюсь, я был ясен и что код также ясен. Я также новичок в stackoverflowпоэтому я прошу прощения, если я не уместен

лучший
Алекс

PS: в примере ниже я повторил первое, но в фактическом портфеле, который я делаюКаждый IMG и количество IMG в каждом слайде и большой палец отличается. 

//Slide

var filterActive = false;

function nextSlide($slide) {
    var $container = $slide.parent('.slides'),
        slidesCount = $container.data('slides-count'),
        slideIndex = $slide.data('slide-index');

    console.log(slidesCount, slideIndex);

    if (slideIndex < slidesCount) {
        $slide.next('.slide').toggleClass('slide-active');
        $slide.toggleClass('slide-active');
    } else {
        $container.children().first().toggleClass('slide-active');
        $slide.toggleClass('slide-active');
    }
}

$('.slide').click(function() {
        nextSlide($(this));
    });
/* Style for index.html_Alexander Portfolio */
* { box-sizing:border-box;
}

body {
  display: block;
  font-size: 12pt; 4vmin;
  font-family:'Arial', Helvetica, Helvetica-Neue, sans-serif;
  text-rendering: optimizeLegibility;
  hyphens: none;
  text-transform: full-width;
  line-height: 1.1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-spacing: -1px; 
  letter-spacing: .775px;
  background: none;
  margin: 8px;
  -webkit-font-smoothing: antialiased;


}

article, div, main, header,p {
  border:none; 1px lightgrey;
}

::selection {
  background: #ADFF2F;
}
/*index page*/

.header {
  display: block;
  height:auto;
  width:23%;
  z-index: 1;
  position: fixed;
  line-height: normal;
  color: black;
  padding: 1em;
}

.header a {
  text-decoration: none;
  border-bottom: solid 1px;
  color: inherit;
}
.header a:hover {
  border-top: 1px solid;}


.projectS{
  display: block;
  width: 75%;
  float: right;
  margin-right: 15px;
  z-index: 0;
  margin-left: 1em
}

.project{
  display: grid;
  grid-template-areas: 
  "a b b";
  grid-template-columns:85px 2fr;
  margin-bottom:1rem;
  width:auto;
}

/*Slide show container*/
.slides {
  grid-area:b;  
  max-width:auto;
  width: auto;
  height: auto;
}


.project-image {
  max-height: 712px;
  max-width:100%;
}

/* Hide the images by default */
.slide{
  display: none;
  cursor: e-resize; 
  margin: 0 0 0.1em 0;
  object-fit: contain;

}

.slide-active {
  display: block;
}

.figureCaption {
 font-size: 9pt;
}

p {
  margin: 0 0 2em 0;
}

/*SideThumbs*/

.thumbs_sidebar {
  grid-area:a;
  display:block;
  height:712px; 
  width: auto;
  object-fit: contain;

}


/* Add a pointer when hovering over the thumbnail images */
.thumbs {
  cursor: pointer;
  display: block;
  margin: 1px;
  opacity: 0.6;
  max-height:100%;
  max-width: 100%;
}

.portrait {
  width: 97%;
}

.landscape{
  width: 97%;

}

/* Add a transparency effect for thumnbail images */
.thumbs:hover {
  opacity: 1;
}
<!--1Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--2Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--1Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--3Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--4Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--5Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>



</main>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/myScript.js"></script>
</body>
</html>
...