I have a problem about the width of slick.js Where the box on the slick-track exceeds the page on the website.
Please pay attention to the image I uploaded this:
for the use of my program code more or less like this:
jQuery('.image-slider').slick({
slidesToShow: 1.7,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: false,
});
.image-slider .slick-slide {
margin: 0 2px;
display: inline-block;
}
.image-slider a {
display: block;
width: 100%;
}
.image-slider img {
width: 860px;
height: auto;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='image-slider'>
<div class='overlay-container'>
<a href='#'><img src='http://www.sixteenconsulting.com/sixteenblog/wp-content/uploads/2017/10/veille_complexe-800x533.jpg' />
<div class='overlay'>
<div class='text' />
</div>
</a>
</div>
<div class='overlay-container'>
<a href='#><img src=' http://www.herbusiness.co.ke/wp-content/uploads/2017/10/battlefield_africa_winners-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
<div class='overlay-container '>
<a href='# '><img src='https://disrupts.com/wp-content/uploads/2016/08/00948135202729.56ed9d795bc5b-2-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
</div>
I couldn't work this out for ages myself. I was changing the
<img width="200px" href="myimage.png">
in the div's but that didn't work. Also I'm using tables so its even more complicated. This can create lots of white space after the images.
Because the whole thing is responsive you need to use width with a percentage to make them work correctly, so that it scales as you change your screen width.
<img width="100%" href="myimage.png">
or some percentage of the screen.
Related
I have a problem, my English is not very good, but I try to fully describe the problem I encountered~
I currently use swiper and lightbox2 to make carousel effects, and I still don’t know if I repeatedly watch the official documents. Where is the problem?
There are three questions in total:
Why does the Swiper arrow keys not work?
If you want to keep the picture at 16:9, are there other settings besides setting the width and height?
In addition, why is my direction? The key is always in the middle, not in the middle of the picture?
Thank you everyone for watching my question. I hope you can get help. Thank you again for your assistance.
[
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 4,
breakpointsInverse: true,
breakpoints: {
//当宽度大于等于320
320: {
slidesPerView: 2,
spaceBetween: 10
},
//当宽度大于等于480
480: {
slidesPerView: 3,
spaceBetween: 20
},
//当宽度大于等于640
640: {
slidesPerView: 3,
spaceBetween:24
}
}
})
.swiper-slide img{
width: 375px;
height: 275px;
object-fit: cover;
}
#media(min-width:600px){
.swiper-slide img{
width: 240px;
height: 135px;
object-fit: cover;
}
}
img{
width: 100%;
}
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.9/swiper-bundle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="https://upload.cc/i1/2021/10/20/cO8Cbn.jpg" data-lightbox="banner1" data-title="1">
<img src="https://upload.cc/i1/2021/10/20/cO8Cbn.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://upload.cc/i1/2021/10/20/1NYZ0y.jpg" data-lightbox="banner1" data-title="1">
<img src="https://upload.cc/i1/2021/10/20/1NYZ0y.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://upload.cc/i1/2021/10/22/xAOuwi.jpg" data-lightbox="banner1" data-title="1">
<img src="https://upload.cc/i1/2021/10/22/xAOuwi.jpg" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I tried to create a simple HTML game of Point-and-click and I'd like to move my character on the screen. Now, I can do it with buttons, but I'd like to put images with hrefs that my character moves without the button. For example, when I click on the men, I'd like that Mario Moves to the men. My code is this:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<center>
<button id="go2"><-</button>
<button id="go">-></button>
</center>
<script>
$( "#go" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "550",
}, 4500 );
});
$( "#go2" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "0",
}, 4500 );
});
</script>
</div>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
Can anybody help me? Thanks a lot!
Here's a basic example, you add an event listener to the object you want Mario to walk to, and then use the offsetLeft property to find where (relatively speaking) to move him. Here I've subtracted the offsetWidth value so Mario doesn't stand right on top of him. If Mario approaches from the right, you would want to check for that and instead add the offsetWidth value.
$("#Objetivo").click(function () {
$( "#Prota" ).animate({
left: this.offsetLeft - this.offsetWidth
}, 1000 );
});
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
Normally in fullpage.js we can set single global
paddingTop, paddingBottom value via below code:
$('#fullpage').fullpage({
paddingTop: '130px',
paddingBottom: '50px',
});
My question is can we assign multiple paddingTop,paddingBottom values to individual scroll sections TO achieve more flexible layout display?
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#4A6FB1', '#939FAA'],
scrollOverflow: true,
sectionSelector: '.section',
slideSelector: '.slide',
slidesNavigation: true,
slidesNavPosition: 'bottom',
verticalCentered: false,
resize: false,
autoScrolling: true,
paddingTop: '130px',
paddingBottom: '50px'
});
});
.slider-container {
width: 50%;
}
.title-text {
font-size: 30px;
font-weight: bold;
}
p {
line-height: 3em;
}
.contentline { border:1px solid white; }
#demo {
position: absolute;
top: 50px;
margin: 0;
left: 0;
right: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
<div class="section">
<div class="container slider-container">
<div class="row margin-0" id="demo">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<div class="title-text">padding:130px,bottom:80px layout</div>
</div>
</div>
<div class="slide contentline" id="slide1" data-anchor="s1">
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<p class="title-text">you may press Arrow Down Key to scroll to the next section </p>
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
<p>line6</p>
<p>line7</p>
<p>line8</p>
<p>line9</p>
<p>line10</p>
<p>line11</p>
<p>line13</p>
<p>line14</p>
<p>line15</p>
<p>line16</p>
<p>line17</p>
<p>line18</p>
<p>line19</p>
<p>line20</p>
<p>line21</p>
<p>line22</p>
<p>line23</p>
<p>line24</p>
<p>line25</p>
<p>line26</p>
<p>line27</p>
<p>line28</p>
<p>line29</p>
<p>line30</p>
</div>
</div>
</div>
<div class="slide" id="slide2" data-anchor="s2">
slide2
</div>
<div class="slide" id="slide3" data-anchor="s3">
<p>slide3</p>
</div>
<div class="slide" id="slide4" data-anchor="s4">
<p>slide4</p>
</div>
</div>
<!--end of container-->
</div>
<div class="section title-text">
<div class="contentline">
Some sections<br> which require different<br> paddingTop and padding bottom values<br>
For example this page, if i need paddingTop: 20px; paddingBottom:20px;<br> instead of running global value of 130px 50px;<br>
if using css to override padding,<br>
the calculated slider height is still wrong.
</div>
</div>
</div>
You can override it as suggested by #CraigduToit.
Fullpage.js will read your value as you can see here.
Here's an example of overriding the paddingTop value. I've colored in grey the real content area without the paddings.
I just used:
#section2 {
padding-top: 10px !important;
}
With this initialization:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', 'purple', '#ADD8E6'],
paddingTop: '100px',
paddingBottom: '100px',
scrollOverflow: true,
});
I believe this can be achieved with css, however it requires you to add (or build upon) a uniuque class for each sections content.
I added a class "testingstuff" to your child div on the second section, so the HTML will be:
<div class="section title-text fp-section active testingstuff">....</div>
And then went on to simply create the class in the .css with the following properties:
.testingstuff{
padding:30px 0px 30px 0px !important;
}
So going forward, all you would need to do is create a class for each section, not the most elegant way to do it, but it is rather quick and easy.
Hope this helps.
I am firstly trying to fade in a div as soon as the page is loaded, then once its loaded I have 2 other divs on it that are acting like buttons. I would like to be able to click those 2 divs to be able to make other divs appear on top of the first one. Here is the code for the first div that should fade in a soon as the page is finished loading:
<div id="step1" style="visibility: hidden; display:block">
<a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
<video width="200" height="113" autoplay="autoplay" mute>
<source src="video/exemple.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div></a>
<a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
<img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
</div></a>
</div>
and here is the code for the next divs that I would like to fad in if either of the 2 buttons is clicked. So if the button video is clicked the div containing the word video will fade in and the div containing the buttons will fade out, same for the second button with picture:
<div id="step2-video" class="box" style="visibility: hidden; background:#C0C0C0">
video
</div>
<div id="step2-picture" class="box" style="visibility: hidden; background:#C0C0C0">
picture
</div>
Finally here is the Javascript, however it does not work:
<script type="text/javascript">
var step1 = $('#step1'),
step2-video = $('#step2-video'),
step2-picture = $('#step2-picture'),
var boxes = $('.box');
$('#btn-step2-video').click(function(){
fade(step1, step2-video);
});
$('#btn-step2-picture').click(function(){
fade(step1, step2-picutre);
});*/
$(document).ready(function() {
$("#step1").fadeIn("quick");
});
function fade(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
});
</script>
Thank you for your help ;)
Edited your original post, code is below.
Guess this is the functionality you want?
$(function() {
var step1 = $('#step1');
var step2video = $('#step2-video');
var step2picture = $('#step2-picture');
var boxes = $('.box');
step1.fadeIn("slow");
$('#btn-step2-video').click(function() {
fade(step1, step2video);
});
$('#btn-step2-picture').click(function() {
fade(step1, step2picture);
});
var fade = function(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="step1" style="display:none; background: #ff0000; width: 100px; height: 100px;">
<a href="#" id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
</div></a>
<a href="javascript:void(0);" id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
</div></a>
</div>
<div id="step2-video" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
video
</div>
<div id="step2-picture" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
picture
</div>