如何在我的图片库中包含带有正确动态文本的按钮
How to include buttons with the right dynamic text in my Image Gallery
我是 jQuery 的新手,我不知道如何将相应的按钮文本包含到图片库中。图片库还有上一个和下一个按钮以及底部的 pagination/radio 按钮。理想情况下,按钮位于 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
所以第一张图片应该有一个带有文本 "New books" 的按钮并且应该 link 到 #newBooks 部分,第二张图片应该有一个带有文本 "Latest news" 的按钮并且应该link 到 #latestNews 等部分。最好每个都做一个?
我已经在下面的代码中为您的图片添加了按钮,请检查它是否有效。仅替换 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
``
我是 jQuery 的新手,我不知道如何将相应的按钮文本包含到图片库中。图片库还有上一个和下一个按钮以及底部的 pagination/radio 按钮。理想情况下,按钮位于 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
所以第一张图片应该有一个带有文本 "New books" 的按钮并且应该 link 到 #newBooks 部分,第二张图片应该有一个带有文本 "Latest news" 的按钮并且应该link 到 #latestNews 等部分。最好每个都做一个?
我已经在下面的代码中为您的图片添加了按钮,请检查它是否有效。仅替换 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
``