I have a pop up image and it works well already. On this pop up image I need next and previous to change the image but I don't know how to set next and previous on the pop up image.
Here is HTML:
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="photos/g3.jpg" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="photos/g4.jpg" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g5.jpg" alt="Photo number 5" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g6.jpg" alt="Photo number 6" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g7.jpg" alt="Photo number 7" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g8.jpg" alt="Photo number 8" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g9.jpg" alt="Photo number 9" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
<li><img src="photos/g10.jpg" alt="Photo number 10" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="navigation" id="nav">
<span class="previous" id="prev">Prev</span>
<span class="next" id="next">Next</span>
</div>
</div>
</div>
CSS:
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
Javascript:
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
viewer.innerHTML =
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
document.getElementById("nav").style.display="block";
viewer.style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
Plz try This one
Demo
$(".popup").popup({
transparentLayer : true,
gallery : true,
galleryTitle : "Gallery1 Title",
imgaeDesc : true,
galleryCounter : true,
08
imageDesc : true,
09
autoSize : false,
boxHeight : 600,
boxWidth : 500,
shadowLength : 0,
transition : 0,
onOpen : function() {
console.log("opened the box .popup");
},
onClose : function() {
console.log("closed the box .popup");
}
});
plz try anotherone example:
Demo
fox example
<li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this)"/></li>
add window.lastImageShown for knowing last selected image
function view(image)
{
window.lastImageShown = image;
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + image.src + '" id="img"/>';
/** your code */
function hide2()
{
window.lastImageShown = null;
document.getElementById("viewer").style.display="none";
/** your code */
and use window.lastImageShown for switching between images
//window.lastImageShown - image
//window.lastImageShown.parentNode - li
//window.lastImageShown.parentNode.nextSibling - next li
//window.lastImageShown.parentNode.nextSibling.firstChild - next image
function next(){
if(window.lastImageShown && window.lastImageShown.parentNode.nextSibling){
view(window.lastImageShown.parentNode.nextSibling.firstChild);
}
}
//window.lastImageShown.parentNode.nextSibling - prev li
//window.lastImageShown.parentNode.nextSibling.firstChild - prev image
function prev(){
if(window.lastImageShown && window.lastImageShown.parentNode.nextSibling){
view(window.lastImageShown.parentNode.previousSibling.firstChild);
}
}
<div class="navigation" id="nav">
<span class="previous" id="prev" onclick="prev()">Prev</span>
<span class="next" id="next" onclick="next()">Next</span>
</div>
Related
I have some images as shown in the layout here.
Currently all images are showing at once. What I want instead is to show only single row of images at a time, I would like to have an animation, when user scolls, then show another row and hide previous one, similariy next scrolling show next row. In case if user scroll upwards, we need to show images from previous row. Like that.
Can't get a clue on how to achieve it. Here, is my current code.
.parallax-window {
min-height: 400px;
background: transparent;
}
.service-box-container{
display: grid;
grid-template-columns: repeat(6, 2fr);
gap: 15px;
}
.service-box-container .service-box{
grid-column: span 2;
}
.service-box-container .service-box:nth-child(5n+4), .service-box-container .service-box:nth-child(5n+5) {
grid-column: span 3;
}
.service-box-container img{
max-width: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 460px;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<div class="service-box-container parallax-window" data-parallax="scroll" data-image-src="https://www.fillmurray.com/640/360">
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
</div>
<script>
$(document).ready(function(){
$('.parallax-window').parallax({});
});
</script>
#PS: I have used parallax js as well, so I would love to keep those parallax effect as well.
Here is the jsfiddle.
Something like the following might be what you are looking for.
Note: You should run the following snippet in "Full-page" mode.
<!doctype html>
<html>
<head>
<title>Test</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<style>
#scrollbox {
overflow-y: scroll;
overflow-x: auto;
background-color: #eee;
float: left;
}
.service-box {
margin: 10px;
text-align: center;
}
.service-box img {
margin: 0px;
}
</style>
</head>
<body>
<div id="scrollbox">
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img alt="Fourth of July 2022" height="200" src="https://google.com/logos/doodles/2022/fourth-of-july-2022-6753651837109457-law.gif" title="Fourth of July 2022" width="500">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
</div>
<script>
// When we get to within 30 pixels of the bottom of a row,
// we show the next row:
const THRESHOLD = 30;
window.onload = function() {
let s = document.getElementById('scrollbox');
let children = s.children;
let scrollHeight;
let maxHeight = 0;
let maxWidth = 0;
for (let i = 0; i < children.length; ++i) {
let child = children[i];
let style = child.currentStyle || window.getComputedStyle(child);
if (i === 0) {
scrollHeight = child.offsetTop - parseInt(style.marginTop);
}
let heightWithoutMargins = parseInt(style.height) +
parseInt(style.paddingTop) +
parseInt(style.paddingBottom) +
parseInt(style.borderTop) +
parseInt(style.borderBottom);
let totalHeight = heightWithoutMargins + parseInt(style.marginTop) + parseInt(style.marginBottom);
if (totalHeight > maxHeight) {
maxHeight = totalHeight;
}
let widthWithoutMargins = parseInt(style.width) +
parseInt(style.paddingLeft) +
parseInt(style.paddingRight) +
parseInt(style.borderLeft) +
parseInt(style.borderRight);
let totalWidth = widthWithoutMargins + parseInt(style.marginLeft) + parseInt(style.marginRight);
if (totalWidth > maxWidth) {
maxWidth = totalWidth;
}
child.top = child.offsetTop - scrollHeight;
child.bottom = child.top + heightWithoutMargins - THRESHOLD;
child.marginTop = parseInt(style.marginTop);
child.style.visibility = 'hidden';
}
s.style.height = maxHeight + 'px';
// Allow for the scrollbar:
s.style.width = (maxWidth + 18) + 'px';
let currentVisible = null;
let currentY = 0;
s.onscroll = function() {
let yTop = s.scrollTop;
let yBottom = yTop + maxHeight;
// Find all visible:
let visible = [];
for (let i = 0; i < children.length; ++i) {
let child = children[i];
let top = child.top;
let bottom = child.bottom;
if ((top >= yTop && bottom < yBottom) || (top< yTop && bottom > yTop)) {
visible.push(children[i]);
}
}
if (currentVisible) {
currentVisible.style.visibility = 'hidden';
}
if (visible.length) {
currentVisible = yTop >= currentY ? visible.pop() : visible[0];
currentVisible.style.visibility = 'visible';
}
else {
currentVisible = null;
}
currentY = yTop;
};
s.onscroll(); // kick things off
};
</script>
</body>
</html>
window.addEventListener('scroll', function () {
console.log(scrollY); //You will see numbers increasing and decreasing in console
if(scrollY === yournecessarynumber) {
// For appearing the necessary height in the window.innerHeight
// If you replace with yournecessarynumber with number the function below will start working after reacing that number and animate your element with appearing from bottom and opacity
element.style.transform: 'scale(1), translateY(0)',
element.style.display: 'block'
}
})
// You should use it for recognizing the style and giving alter in animation
element.style.transform: 'scale(0), translateY(1000%)',
element.style.display: 'none'
No onClick, just automatic change of image and caption every second.
Here's the code I have so far:
HTML:
<div class="col-md-6">
<h2>Fishing Slide Show</h2>
<h4 id="caption">Casting on the Upper Kings</h4>
<img id="slide" src="images/casting1.jpg" alt="" height="200px">
<div id="slides">
<img src="images/casting1.jpg" alt="Casting on the Upper Kings" height="200px">
<img src="images/casting2.jpg" alt="Casting on the Lower Kings" height="200px">
<img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn" height="200px">
<img src="images/fish.jpg" alt="Catching on the South Fork" height="200px">
<img src="images/lures.jpg" alt="The Lures for Catching" height="200px">
</div>
</div>
And this is my Javascript:
var img_array = ["images/casting1.jpg", "images/casting2.jpg"
,"images/catchrelease.jpg", "images/fish.jpg"
,"images/lures.jpg"];
var alt_array = ["Casting on the Upper Kings", "Casting on the Lower Kings",
"Catch and Release on the Big Horn", "Catching on the South Fork",
"The Lures for Catching"];
var currImg = 0;
var currAlt = 0;
function slideShow();{
img.src = img_array[index++, img_array.length];
img.alt = alt_array[index++, alt_array.length];
//document.getElementById("slides").src = img_array[currImg];
//document.getElementById("slides").alt = alt_array[currAlt];
}
let stop = setInterval(slideShow, 1000);
Here's a simple slideshow I made.
You simply have the first slide have the active tab, then you use .nextElementSibling to get the next slide.
function runSlideshow() {
const current = document.querySelector(".slide.current");
current.classList.toggle("current");
current.nextElementSibling ?
current.nextElementSibling.classList.toggle("current") :
clearInterval(slideshow);
}
const slideshow = setInterval(runSlideshow, 2000);
.slide {
height: 200px;
display: none;
}
.slide.current {
display: block;
}
<div id="container">
<img class="slide current" src="https://cataas.com/cat/6136c137ebad510011b54b90" />
<img class="slide" src="https://cataas.com/cat/6136be59ebad510011b54b88" />
<img class="slide" src="https://cataas.com/cat/61307aa542fcca001bb841f5" />
<img class="slide" src="https://cataas.com/cat/6123cb0fe8503700118bdb62" />
<img class="slide" src="https://cataas.com/cat/6120c8103a342d0013920e23" />
</div>
I have the following JavaScript function where I am counting the total divs with a classname, but not all must be changed, that is specified with the amount param. So there are 4 classes, so the each counts the classes and then the for loop changes them according to the amount param.
Yet this doesn't seem to work, see commented out version too -
function changeImages(change, amount) {
var $projImg = $('.proj-img');
$.each($projImg, function(i) {
$(this).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
// $.each($projImg, function (j) {
// for(var i = 0; i < amount; i++){
// $(this).attr('src', 'src/img/' + change + 'Slide' + (i) + '.png');
// }
// });
}
You could use an array and then slice it so that it contains no more than the amount number of elements, no jQuery required:
function changeImages(change, amount) {
const projImgs = [...document.querySelectorAll('.proj-img')]
.slice(0, amount);
projImgs.forEach((img, i) => {
img.src = 'src/img/' + change + 'Slide' + (i + 1) + '.png';
});
}
Use the :lt() selector
var amount = 5,change = '';
$('.proj-img:lt('+amount+')').map(function(i,el){
$(el).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
console.log($('.proj-img'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
Just use jQuery's .slice():
function changeImages(amount) {
const $matches = $('.foo').slice(0, amount);
$matches.addClass('bar');
}
changeImages(10);
.foo {
border-bottom: 8px solid red;
}
.bar {
border-color: cyan;
}
.foo:hover {
border-color: black;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your JS code would then look like this:
function changeImages(change, amount) {
$('img').slice(0, amount).each((i, el) => {
el.setAttribute('src', `https://place-hold.it/200x200&text=${ change }-${ i + 1 }`);
});
}
changeImages('UPDATED', 3);
body {
margin: 0;
}
img {
float: left;
max-width: 20vw;
}
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also, regarding :lt(), keep in mind that's not part of the CSS specification, as stated in the docs:
Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(0, index) instead.
I would like to create in jQuery a "wall" of logo like on the https://www.squarespace.com/ website at the "TRUSTED BY THE WORLD’S BEST" section.
The same thing : 8 logos with fade-in fade-out.
Can I have some help please ?
<div class="client-logos-grid">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
I begin with this : https://jsfiddle.net/vc43mzxL/1/
$('document').ready(function() {
var curIndex = 0;
var src = ['http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;
$(document).ready(function() {
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2) {
if (fadeOut2) {
setTimeout(fadeOut, waitTimeInMilliseconds);
} else {
var index = Math.floor((Math.random() * src.length))
if (curIndex == index) {
index++;
if (index >= src.length) {
index -= 8;
}
}
curIndex = index;
$(".client-logo img").attr("src", src[index]);
fadeIn();
}
}
function fadeOut() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 0, function() {
switchImageAndWait(false);
});
}
function fadeIn() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 1, function() {
switchImageAndWait(true);
});
}
});
$(function() {
//calling every 20 millseconds
setInterval(function() {
changeLogo();
}, 200);
});
function changeLogo() {
//taking first active logo
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
shownLogo.fadeOut(200, function() {
shownLogo.addClass('hidden');
//check if its the last logo in the row
if (shownLogo.next('.client-logo').length > 0) { // not last
shownLogo.next('.client-logo').fadeIn(400, function() {
shownLogo.next('.client-logo').removeClass('hidden');
});
} else { // last
//move to first
$('.client-logo:first').fadeIn(400, function() {
$('.client-logo:first').removeClass('hidden');
});
}
});
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="client-logos-grid">
<img src="" alt="">A
<img src="" alt="">B
<img src="" alt="">C
<img src="" alt="">D
<img src="" alt="">E
<img src="" alt="">F
<img src="" alt="">G
<img src="" alt="">H
</div>
Are you looking for something like this?
i inspect their web and they use their custom js to animate the logo transition.
you can also do this by using simplefadeslideshow
<div id="slideshow">
<li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow -->
<li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
</div>
and bind the plugin to the HTML structure you have created
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
the demo web can be seen here hope this helps
I need to pass the 2 variables(nextimage, previmage) in this function
$("a.lightbox").click(function abc(e) {
var nextimage = $(this).parent().next().children('a').attr('href');
var previmage = $(this).parent().prev().children('a').attr('href');
return nextimage;
return previmage;
});
They should be passed to this function like
function nextimage(){
$('<img src="nextimage"/>')
}
Any help will be greatly appreciated
I think this is what you are looking for..
$("a.lightbox").click(function(e) {
var nextimage = $(this).parent().next().children('a').attr('href');
var previmage = $(this).parent().prev().children('a').attr('href');
nextimage(nextimage, previmage);
});
function nextimage(nextimage, previmage){
$('<img src="nextimage"/>')
}
Though the function call may not be necessary...depending on your application.
I got better solution. Check this:
Ref: Previous Question
<div>
<ul class="listing">
<li><img src="thumbs/eli_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/ggallin_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/jontarata_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/macka s tatuirovki_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/mk7_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/P5010345_t.jpg" width="150" height="100" class="images" /></li>
</ul>
<a id="prev">Prev</a>
<a id="next">Next</a>
</div>
<img id="currentImage"></img>
<script type="text/javascript">
(function() {
var index = 0;
var showImage = function(i) {
var url = $("ul.listing a").eq(i).attr("href");
$("#currentImage").attr("src", url);
index = i;
};
$("#prev").click(function() {
showImage(index - 1);
});
$("#next").click(function() {
showImage(index + 1);
});
$("ul.listing a").click(function() { var i = $(this).index(); showImage(i); });
})();
</script>