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>
Related
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
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
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>
I created a image loop by using jquery and it works fine. Here is my code.
$(document).ready(function(){
$('.images').hide();
$('#image1').show('slide', {direction: 'right'}, 500);
$('#image1').delay(2000).hide('slide', {direction: 'left'}, 500);
var sc = $('#image img').size();
var count = 2;
setInterval(function(){
$('#image'+count).show('slide', {direction: 'right'}, 500);
$('#image'+count).delay(2000).hide('slide', {direction: 'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 3000);
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = name;
});
});
Here is the html code.
<div id="image">
<img class="images" id="image1" alt="Image loop" src="image1.jpg" width="550px" height="400px"/>
<img class="images" id="image2" alt="Image loop" src="image2.jpg" width="550px" height="400px"/>
<img class="images" id="image3" alt="Image loop" src="image3.jpg" width="550px" height="400px"/>
<img class="images" id="image4" alt="Image loop" src="image4.jpg" width="550px" height="400px"/>
<img class="images" id="image5" alt="Image loop" src="image5.jpg" width="550px" height="400px"/>
</div>
<div id="name">
<div class="name" id="name1">
<img src="image1.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name2">
<img src="image2.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name3">
<img src="image3.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name4">
<img src="image4.jpg" width="80px" height="80px"/>
</div>
<div class="name" id="name5">
<img src="image5.jpg" width="80px" height="80px"/>
</div>
The css controls the name sets to the right. My idea is, click the small image on the right to immediately switch the image which user choose.
It seems working a little bit. The setInterval is still runing and the loop is ruined. How can I deal with this properly? Here is the jsfiddle link. Thanks!
You can stop setInterval from running with clearInterval. Specifically, you need to call it on the return value of setInterval.
var interval = setInterval(...
clearInterval(interval);
EDIT: this doesn't apply directly to your problem. What you can do is just create a separate function that does the callback to setInterval. Then, also call that function as part of the callback to the click event. Whether you want to clear the interval or not (halt the animation) is up to you.
The problem occurs because you change the type of count from a number to a string inside your click handler - when you assign name to count. I've edited your code to include parseInt.
$('.name').click(function(){
var name = $(this).attr('id');
name = name.replace('name', '');
count = parseInt(name, 10);
});
Here's a simple working example
var interval;
var times;
function doSomething() {
if (times == 100) {
// Unset the interval:
clearInterval(interval);
} else {
alert("Hey");
times++;
}
}
// Initialize interval:
interval = setInterval(doSomething, 1000);
I know this is pretty basic, I'm trying to get the 'src' attribute of some images and put them in the same number of #image fields:
count = 0;
$('.selected').each(function() {
count++;
// the idea is to get the value from each ".selected img"
$('#image' + count).val( this + img ).attr("src");
});
How to reference the image from 'this' ? or what would be the good method ? .... Thanks !
EDIT:
I have something like this:
<li><img src="..." alt="" class="selected" /></li>
<li><img src="..." alt="" /></li>
<li><img src="..." alt="" /></li>
<li><img src="..." alt="" class="selected" /></li>
I want to write the src attribute of those img s in this:
<input type="hidden" id="image1" name="image1" value="" />
<input type="hidden" id="image2" name="image2" value="" />
Thanks!
Is this the sort of thing you mean?
$(function() {
var count = 0;
$('.selected').each(function() {
count++;
var source = $('img', this).attr('src');
$('input#image' + count).val(source);
});
});
$('img.selected').each(function(i, img) {
$('#image' + (i + 1)).val(img.src);
});
If I understand what you're asking correctly, you'd like to put the src attribute in each associated hidden field tag, is that correct? I'm a little confused as to the distinction between the use of selected vs non-selected images, so I'm ignoring that in this solution:
HTML:
<ul>
<li><img src="src0" alt="" class="selected" /></li>
<li><img src="src1" alt="" /></li>
<li><img src="src2" alt="" /></li>
<li><img src="src3" alt="" class="selected" /></li>
</ul>
<input type="text" id="image0" name="image0" value="" />
<input type="text" id="image1" name="image1" value="" />
<input type="text" id="image2" name="image2" value="" />
<input type="text" id="image3" name="image3" value="" />
Script:
$('input[type=text]').each(function(idx, e){
$(this).val($($('img')[idx]).attr('src'));
});
http://jsfiddle.net/dbrecht/MDfD9/
(I used text fields here for illustration, but you could change the attributes to hidden easily)
Of course, this assumes that each image has an associated input field. I'm a little curious as to why you're going down this path though.. What exactly are you trying to accomplish? From what I've seen, there may be other ways of going about it..
I think this is what you mean.
$('.selected').each(function(idx, obj) {
$('#image' + (idx + 1)).attr("src", obj.src);
});