Как добавить кнопки с нужным динамическим текстом в мою галерею изображений - PullRequest
Новая
       28

Как добавить кнопки с нужным динамическим текстом в мою галерею изображений

1 голос
/ 30 октября 2019

Я новичок в jQuery и не могу понять, как включить соответствующие тексты кнопок в галерею изображений. Галерея изображений также имеет кнопки «предыдущая» и «следующая», а также кнопки пагинации / переключатели внизу. В идеале кнопки находятся между элементами H3 и H4 (вверху) и нумерацией страниц (внизу).

Это html: 

<body>
<div class="flex-container">
    <header class="header">
         <!-- galleryContainer -->
        <section id="galleryContainer">
            <ol id="galleryPagination">
                <li><a class="galleryThumb" href="images/newbooks-tb-min.jpg" title="New books">New books</a></li>
                <li><a class="galleryThumb" href="images/latestnews-tb-min.jpg" title="Latest news">Latest news</a></li>
                <li><a class="galleryThumb" href="images/newrecipes-tb-min.jpg" title="New recipes">New recipes</a></li>
            </ol>
        </section> <!-- end of galleryContainer --> 
    </header>
    <section id="newBooks" class="row">New books</section> <!-- end of newBooks -->
    <section id="latestNews"  class="row">Latest news</section> <!-- end of latestNews --> 
    <section id="newRecipes" class="row">New recipes</section> <!-- end of newRecipes --> 
</div> <!-- end of flex-container -->
<script src="js/jquery.min.js"></script>
<script src="js/kitchen.js"></script>
</body>

и jQuery: 

/*
Image Gallery preferred DOM:
- div #galleryImageContainer
    - img newbooks (active, z-index 10)
    - img latest news (z-index 20)
    - img new recipes (z-index 20)

- div #centerPiece with
    - img#galleryPrev
    - div#heroMessages
        - h3 heading (z-index 30)
        - horizontal line (z-index 30)
        - h4 heading
    - img#galleryNext
    - div#heroButton linking to corresponding sections (see html)
        -a href="#newBooks"
        -a href="#latestNews"
        -a href="#newRecipes"
    - ol#galleryPagination
        - li.active
        - li
        - li
*/
$(document).ready(function(){
    /*  ======================================================================
        Initialisation
    =========================================================================== */
    $("#galleryPagination li").css({
        'cursor'        :   'pointer',
        'font-size'     :   '0',
        'width'         :   '1rem',
        'height'        :   '1rem',
        'padding'       :   '0',
        'border-radius' :   '50%'
    });
    $pagination = $("#galleryPagination").detach(); // detach the galleryPagination from the HTML-code and store in the $pagination variable
    $("#galleryContainer").append('<div id="galleryImageContainer"></div>'); // append galleryImageContainer in the galleryContainer
    $("#galleryContainer").append('<div id="centerPiece"></div>'); // idem for centerPiece
    $("#centerPiece").append('<img id="galleryPrev" src="images/prev.svg" alt="previous image" title="Show previous image." role="button">'); // within centerPiece append the Prev button
    $("#centerPiece").append('<div id="heroMessages"></div>'); // heroMessages
    $("#heroMessages").append('<h3>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit!</h3>'); // h3
    $("#heroMessages").append('<h4>Sed do eiusmod tempor incididunt<br>ut labore et dolore magna aliqua!</h4>'); // h4
    $("#centerPiece").append('<img id="galleryNext" src="images/next.svg" alt="next image" title="Show next image." role="button">'); // Next button
    $("#centerPiece").append('<div id="heroButton"></div>'); // div heroButton
    $("#galleryContainer").append($pagination); // Put back the pagination as galleryContainer's last child
    $("#galleryPagination li:first-child").addClass("active"); // styling of the first pagination bullet

    var galleryCurrentItem = 0; // Current slide (zero based)
    //var galleryCurrentBtn = 0; // Current button (zero based)
    var gallerySize = $("#galleryPagination li").length; // The number of items in the gallery is set by the number of li's in the HTML

    /*  ======================================================================
        Functions
    =========================================================================== */
    function changeGalleryImage($clickedObject){
        if($clickedObject.attr("id") == "galleryPrev"){ // Is the prev button clicked on?
            if(galleryCurrentItem == 0){ // When we see the first image?
                galleryCurrentItem = gallerySize-1; // Then go to the last image.
            } else { // If NOT?
                galleryCurrentItem--; // Then subtract galleryCurrentItem with one.
            }   
        } else if($clickedObject.attr("id") == "galleryNext"){ // Is the next button clicked on?
            if(galleryCurrentItem == gallerySize-1){ // When we see the last image?
                galleryCurrentItem = 0; // Then go to the first image.
            } else { // If NOT?
                galleryCurrentItem++; // Then increase galleryCurrentItem with one.
            } // end of else
        } // end of else if

        if($("#galleryImageContainer img").eq(galleryCurrentItem).css("left") != "0px"){ // If we're NOT clicking on an image that is already on screen?
            $("#galleryContainer").css("cursor", "wait"); // Include wait icon
            $("#galleryPagination li").css("pointer-events", "none"); // Block click events for all li's in #galleryPagination

            //set pagination    
            $("#galleryPagination li").removeClass("active"); // remove class active
            $clickedObject.addClass("active"); // and put it on the new one

            //set images (incl animation)
            $("#galleryImageContainer img").css("z-index", "10"); // Put all images on z-index 10.
            $("#galleryImageContainer img").eq(galleryCurrentItem).css("z-index", "20"); // The image that corresponds with the clicked pagination is given a higher z-index than the others.
            $("#galleryImageContainer img").eq(galleryCurrentItem).animate({ 
                "left" : "0px"
            }, 500, function(){
                // Callback: When the left animation is ready, the other images are put out of the picture.
                $("#galleryImageContainer img:not(:eq(" + galleryCurrentItem + "))").css("left", "2560px");
                $("#galleryContainer").css("cursor", "default");
                $("#galleryPagination li").css("pointer-events", "auto");
            }); // end of animation
        } // end if

        // Pagination should also work well with the prev and next buttons.
        if($clickedObject.attr("id") == "galleryPrev" || $clickedObject.attr("id") == "galleryNext"){ // Did we click on prev or next?
                $("#galleryPagination li").eq(galleryCurrentItem).addClass("active"); // Update to the correct pagination bullet.
        }
    } // end function changeGalleryImage

    function camelize(text) {
        return text.replace(/^([A-Z])|[\s-_]+(\w)/g, function(match, p1, p2, offset) {
            if (p2) return p2.toUpperCase();
            return p1.toLowerCase();        
        });
    } // end function camelize text

    // function changeGalleryButton?

    /*  ======================================================================
        Gallery Set-up
    =========================================================================== */
    $("#galleryPagination li a").each(function(index){ // For every a-tag in the pagination
        var zIndex, left, style;
        if(index == 0){ // The first image is visible
            zIndex = 10;
            left = "0px";
        } else { // The others should be placed left of the first image (out of sight due to CSS overflow:hidden
            zIndex = 20;
            left = "2560px";
        }

        style = ' style="z-index: ' + zIndex + '; left: ' + left + ';"';
        $galleryImage = '<img src="' + $(this).attr("href") + '" alt="' + $(this).attr("title") + '"' + style + '>';
        $("#galleryImageContainer").append($galleryImage);

        $(this).parent().click(function(){ // Pagination li button event.
            galleryCurrentItem = index;
            changeGalleryImage($(this));
        }); // End of click on li in pagination.

        var $sectionText = $(this).text(); // store the button texts in var
        var $sectionLink = camelize($sectionText); // change the text into camel case words, eq to the real ids in a href in html, ie newBooks etc. and put them in another var

        console.log($sectionText);

        $galleryBtnLink = '<a href="#' + $sectionLink + '" class="btn btn-info" role="button">' + $sectionText + '</a>';
        $("#heroButton").append($galleryBtnLink); // append button incl text in the heroButton

    }); // End of each of all a's of the pagination.

    $("#galleryPrev").click(function(){ // Previous button event.
        changeGalleryImage($(this));
    });

    $("#galleryNext").click(function(){ // Next button event.
        changeGalleryImage($(this));
    });
}); // End document.ready

Поэтому на первом изображении должна быть кнопка с текстом «Новые книги» и ссылка на раздел #newBooks, на втором изображении должна быть кнопка с текстом «Последние новости» и ссылка на раздел #latestNews и т. Д. . Лучше всего сделать еще один друг?

1 Ответ

0 голосов
/ 02 ноября 2019

Я добавил кнопку к вашим изображениям в коде ниже, проверьте, работает ли он. Заменить только jquery 

CSS : 
   * {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.flex-container > * {
  flex: 1 100%;
}

.flex-container > *:not(:first-child) {
  padding: 1em;
}

/*=========================================================================
  Typography
========================================================================== */

body {
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  text-align: center;
  font-size: 1rem;
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
}

body h1 {
  font-size: 0;
}

body h2 {
  font-weight: 700;
  color: #418C9F;
  line-height: 1.5;
  text-align: center;
  font-size: 1.8rem;
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  margin-bottom: 1em;
  text-transform: uppercase;
}

body p {
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
}

body h3 {
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Merriweather', 'Times New Roman', serif;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  font-style: italic;
  z-index: 30;
  margin: 0 auto;
}

@media (min-width: 600px) {
  body h3 {
    font-size: 1.8rem;
  }
}

body h4::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 0;
  top: 46%;
  left: 10%;
  border-top: 4px solid #418C9F;
}

body h4 {
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  left: 20%;
  z-index: 30;
  margin: 0 auto;
}

@media (min-width: 600px) {
  body h4 {
    font-size: 1.8rem;
  }
}

/*=========================================================================
  Buttons
========================================================================== */

#galleryContainer .showTxt {
  font-size: 1.3em;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background-color: orange;
  border-radius: 0.2em;
  padding: 0.8em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  width: 80%;
  left: 10%;
  z-index: 30;
  position: absolute;
  bottom: 10%;
  text-decoration: none;
}

@media (min-width: 600px) {
  #galleryContainer .showTxt {
    width: 50%;
    left: 25%;
  }
}

@media (min-width: 801px) {
  #galleryContainer .showTxt {
    width: 30%;
    left: 35%;
  }
}

@media (min-width: 1025px) {
  #galleryContainer .showTxt {
    width: 25%;
    left: 37.5%;
  }
}

/*=========================================================================
  Header
========================================================================== */

#galleryContainer {
  height: 60vh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

#galleryContainer #centerPiece {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  height: 150px;
  margin-top: 35%;
}

@media (min-width: 600px) {
  #galleryContainer #centerPiece {
    margin-top: 200px;
    height: 200px;
  }
}

#galleryContainer #heroMessages {
  z-index: 30;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 80%;
}

#galleryContainer > .imgGal {
  height: auto;
  padding: 50% 0;
  cursor: pointer;
}

#galleryContainer #galleryPrev,
#galleryContainer #galleryNext {
  width: 10%;
  filter: invert(0.8);
}

@media (min-width: 600px) {
  #galleryContainer #galleryPrev,
  #galleryContainer #galleryNext {
    width: 5%;
  }
}

@media (min-width: 801px) {
  #galleryContainer #galleryPrev,
  #galleryContainer #galleryNext {
    width: 3%;
  }
}

#galleryContainer #galleryPrev {
  left: 0.1rem;
  z-index: 30;
}

#galleryContainer #galleryNext {
  right: 0.1rem;
  z-index: 30;
}

#galleryContainer #galleryImageContainer {
  float: left;
  background-color: white;
  border: 1px solid #CDCDCD;
  max-width: 50%;
  overflow: hidden;
  margin: 0 auto;
}

@media (min-width: 600px) {
  #galleryContainer #galleryImageContainer {
    max-width: 80%;
  }
}

@media (min-width: 801px) {
  #galleryContainer #galleryImageContainer {
    max-width: 100%;
  }
}

#galleryContainer #galleryImageContainer .imgGal {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  padding: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 600px) {
  #galleryContainer #galleryImageContainer .imgGal {
    margin-left: 0;
  }
}

@media (min-width: 801px) {
  #galleryContainer #galleryImageContainer .imgGal {
    height: 100%;
  }
}

#galleryContainer #galleryPagination {
  margin: 0 auto;
  z-index: 30;
  padding-bottom: 1rem;
}

#galleryContainer #galleryPagination li {
  font-family: sans-serif;
  font-size: 1rem;
  background-color: white;
  border: 1px solid #CDCDCD;
  padding: 0.5rem;
  display: inline-block;
  margin: 0 0.2rem;
}

#galleryContainer #galleryPagination li.active {
  background-color: #418C9F;
}

@media (min-width: 801px) {
  #galleryContainer {
    height: 43vh;
  }
}

@media (min-width: 1025px) {
  #galleryContainer {
    height: 54vh;
  }
}

/*=========================================================================
  Sections
========================================================================== */

section:not(#galleryContainer) {
  display: flex;
  flex-flow: column nowrap;
}


section>div {
  justify-content: space-around;
}

/*=========================================================================
  newBooks
========================================================================== */

#newBooks {
  background: MediumSeaGreen;
}

/*=========================================================================
  latestNews
========================================================================== */

#latestNews {
  background: Violet;
}

/*=========================================================================
  newRecipes
========================================================================== */

#newRecipes {
  background: cornflowerblue;
}

HTML: 

  <div class="flex-container">
    <header class="header">
      <!-- galleryContainer -->
      <section id="galleryContainer">
        <ol id="galleryPagination">
          <li><a class="galleryThumb" href="https://live.staticflickr.com/65535/48995921446_1f27b66df7_h.jpg" title="New books">New books</a></li>
          <li><a class="galleryThumb" href="https://live.staticflickr.com/65535/48996121637_eeb66b74af_h.jpg" title="Latest news">Latest news</a></li>
          <li><a class="galleryThumb" href="https://live.staticflickr.com/65535/48995377303_cf375094ef_h.jpg" title="New recipes">New recipes</a></li>
        </ol>
      </section> <!-- end of galleryContainer -->
    </header>
    <section id="newBooks" class="row">New books</section> <!-- end of newBooks -->
    <section id="latestNews" class="row">Latest news</section> <!-- end of latestNews -->
    <section id="newRecipes" class="row">New recipes</section> <!-- end of newRecipes -->
  </div> <!-- end of flex-container -->


JS:

$(document).ready(function(){
    /*  ======================================================================
        Initialisation
    =========================================================================== */
    $("#galleryPagination li").css({
        'cursor'        :   'pointer',
        'font-size'     :   '0',
        'width'         :   '1rem',
        'height'        :   '1rem',
        'padding'       :   '0',
        'border-radius' :   '50%'
    });
    $pagination = $("#galleryPagination").detach(); // detach the galleryPagination from the HTML-code and store in the $pagination variable
    $("#galleryContainer").append('<div id="galleryImageContainer"></div>'); // append galleryImageContainer in the galleryContainer
    $("#galleryContainer").append('<div id="centerPiece"></div>'); // idem for centerPiece
    $("#centerPiece").append('<img id="galleryPrev" src="https://drive.google.com/open?id=1sYaSH33pTEvCM-j3_3i0WzIGW-wtnsoc" alt="previous image" title="Show previous image." role="button">'); // within centerPiece append the Prev button
    $("#centerPiece").append('<div id="heroMessages"></div>'); // heroMessages
    $("#heroMessages").append('<h3>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit!</h3>'); // h3
    $("#heroMessages").append('<h4>Sed do eiusmod tempor<br>incididunt ut labore et dolore!</h4>'); // h4
    $("#centerPiece").append('<img id="galleryNext" src="https://drive.google.com/open?id=1ZKxD5cajPE1lg8QEHonmD4CfRUdBYpIz" alt="next image" title="Show next image." role="button">'); // Next button
    //$("#centerPiece").append('<div id="heroButton"></div>'); // div heroButton
    $("#galleryContainer").append($pagination); // Put back the pagination as galleryContainer's last child
    $("#galleryPagination li:first-child").addClass("active"); // styling of the first pagination bullet

    var galleryCurrentItem = 0; // Current slide (zero based)
    //var galleryCurrentBtn = 0; // Current button (zero based)
    var gallerySize = $("#galleryPagination li").length; // The number of items in the gallery is set by the number of li's in the HTML

    /*  ======================================================================
        Functions
    =========================================================================== */
    function changeGalleryImage($clickedObject){

        if($clickedObject.attr("id") == "galleryPrev"){ // Is the prev button clicked on?
            if(galleryCurrentItem == 0){ // When we see the first image?
                galleryCurrentItem = gallerySize-1; // Then go to the last image.
            } else { // If NOT?
                galleryCurrentItem--; // Then subtract galleryCurrentItem with one.
            }   
        } else if($clickedObject.attr("id") == "galleryNext"){ // Is the next button clicked on?
            if(galleryCurrentItem == gallerySize-1){ // When we see the last image?
                galleryCurrentItem = 0; // Then go to the first image.
            } else { // If NOT?
                galleryCurrentItem++; // Then increase galleryCurrentItem with one.
            } // end of else
        } // end of else if



        if($("#galleryImageContainer .imgGal").eq(galleryCurrentItem).css("left") != "0px"){ // If we're NOT clicking on an image that is already on screen?
            $("#galleryContainer").css("cursor", "wait"); // Include wait icon
            $("#galleryPagination li").css("pointer-events", "none"); // Block click events for all li's in #galleryPagination

            //set pagination    
            $("#galleryPagination li").removeClass("active"); // remove class active
            $clickedObject.addClass("active"); // and put it on the new one

            //set images (incl animation)
            $("#galleryImageContainer .imgGal").css("z-index", "10"); // Put all images on z-index 10.
            $("#galleryImageContainer .imgGal").eq(galleryCurrentItem).css("z-index", "20"); // The image that corresponds with the clicked pagination is given a higher z-index than the others.
            $("#galleryImageContainer .imgGal").eq(galleryCurrentItem).animate({ 
                "left" : "0px"
            }, 500, function(){
                // Callback: When the left animation is ready, the other images are put out of the picture.
                $("#galleryImageContainer .imgGal:not(:eq(" + galleryCurrentItem + "))").css("left", "2560px");
                $("#galleryContainer").css("cursor", "default");
                $("#galleryPagination li").css("pointer-events", "auto");
            }); // end of animation
        } // end if

        // Pagination should also work well with the prev and next buttons.
        if($clickedObject.attr("id") == "galleryPrev" || $clickedObject.attr("id") == "galleryNext"){ // Did we click on prev or next?
                $("#galleryPagination li").eq(galleryCurrentItem).addClass("active"); // Update to the correct pagination bullet.
        }
    } // end function changeGalleryImage

    function camelize(text) {
        return text.replace(/^([A-Z])|[\s-_]+(\w)/g, function(match, p1, p2, offset) {
            if (p2) return p2.toUpperCase();
            return p1.toLowerCase();        
        });
    } // end function camelize text

    // function changeGalleryButton?

    /*  ======================================================================
        Gallery Set-up
    =========================================================================== */
    $("#galleryPagination li a").each(function(index){ // For every a-tag in the pagination
        var zIndex, left, style;
        if(index == 0){ // The first image is visible
            zIndex = 10;
            left = "0px";
        } else { // The others should be placed left of the first image (out of sight due to CSS overflow:hidden
            zIndex = 20;
            left = "2560px";
        }

        style = ' style="z-index: ' + zIndex + '; left: ' + left + ';"';
        $galleryImage = '<img src="' + $(this).attr("href") + '" alt="' + $(this).attr("title") + '" >';

    //var $sectionText = $(this).attr("title"); // store the button texts in var
        //var $sectionLink = camelize($sectionText); // change the text into camel case words, eq to the real ids in a href in html, ie newBooks etc. and put them in another var

        //$("#galleryImageContainer").append('<a href="#' + $sectionLink + '" class="btn btn-info heroButton" role="button"></a>');

        $("#galleryImageContainer").append("<div class='imgGal' " + style + "></div>")
        $("#galleryImageContainer .imgGal").eq(index).append('<button class="showTxt">' + $(this).attr("title") + '</button>');
        $("#galleryImageContainer .imgGal").eq(index).append($galleryImage);

        $(this).parent().click(function(){ // Pagination li button event.
            galleryCurrentItem = index;
            changeGalleryImage($(this));
        }); // End of click on li in pagination.

        var $sectionText = $(this).text(); // store the button texts in var
        var $sectionLink = camelize($sectionText); // change the text into camel case words, eq to the real ids in a href in html, ie newBooks etc. and put them in another var

        console.log($sectionText);

        $galleryBtnLink = '<a href="#' + $sectionLink + '" class="btn btn-info" role="button">' + $sectionText + '</a>';
        $("#heroButton").append($galleryBtnLink); // append button incl text in the heroButton

    }); // End of each of all a's of the pagination.

    $("#galleryPrev").click(function(){ // Previous button event.
        changeGalleryImage($(this));
    });

    $("#galleryNext").click(function(){ // Next button event.
        changeGalleryImage($(this));
    });
}); // End document.ready


``
...