How could I make it that if someone clicks the image of the selected product to change the url of the button under the images
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
text/image for amusement only, they are not really the products
What I have tried
window.onload = function() {
var sel = document.getElementById('product');
sel.onchange = function() {
document.getElementById("buy").href = "https://amazon.com/" + this.value;
}
}
Here's a codepen http://codepen.io/anon/pen/bdyWGa
Jquery solution:
$(function(){
$("img").click(function(){
$("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
});
});
Javascript Version:
var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
img = images[i];
img.addEventListener("click", function() {
document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
});
}
Working fiddle: http://codepen.io/anon/pen/NqVjGY
<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
and:
$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});
here you describe clicking on which img will change url to what
In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.
window.onload = function() {
var sel = document.getElementById('product');
sel.onclick = function(e) {
console.log( e.target.attributes[0].value)
document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
}
}
CodeOpen
Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element
$(function(){
$('img').on('click', function(){
$('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
Related
I'm using this Image Gallery Plugin. I need to populate the Images via JavaScript. I tried some methods. But it is not working.
Can someone suggest me a way to populate Images via JavaScript.
var img1 = "https://picsum.photos/600.jpg?image=251";
var img2 = "https://picsum.photos/600.jpg?image=252";
var img3 = "https://picsum.photos/600.jpg?image=253";
var c1 = document.getElementById('c1');
c1.src = img1;
<div class="example" id="exampleZoomGallery" style="display: flex;">
<a class="inline-block" href="../../global/img/heart.jpg" title="view-7" data-source="../../global/img/heart.jpg">
<img id="c1" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
<a class="inline-block" href="../../global/img/heart.jpg" title="view-8" data-source="../../global/img/heart.jpg">
<img id="c2" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
<a class="inline-block" href="../../global/img/heart.jpg" title="view-9" data-source="../../global/img/heart.jpg">
<img class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
</div>
How about something like this? https://jsfiddle.net/weazk35f/22/
Create a container to place your images in...
<div class="example" id="exampleZoomGallery" style="display: flex;"></div>
then store all of the images in an array and get a reference to the container...
var images = [
'https://picsum.photos/600.jpg?image=251',
'https://picsum.photos/600.jpg?image=252',
'https://picsum.photos/600.jpg?image=253'
];
var gallery = jQuery('#exampleZoomGallery');
Next create a function to populate an image...
function populateImage(src, container) {
var a = jQuery('<a></a>');
a.attr('href', src);
a.attr('data-toggle', 'lightbox');
// Optional but allows for navigation between images within lightbox
a.attr('data-gallery', container.attr('id'));
var img = jQuery('<img />');
img.attr('src', src);
a.append(img);
container.append(a);
}
and finally iterate over each of the images in your array when the DOM is ready and initialize your lightbox plugin
jQuery(document).ready(function($) {
$(images).each(function(index, image) {
populateImage(image, gallery);
});
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
});
How to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);
Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);
You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());
Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});
I am using jQuery to swap between images on and off hover. Here is my code.
HTML
<img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt="">
jQuery
$(".commentImg").hover(function() {
var swap = $(this).attr("data-swap");
$(this).attr('src', swap);
},
function() {
var swap = $(this).attr("data-swap");
$(this).removeAttr(swap);
});
the mouseover works fine, but the mouseout doesn't. Can you guys help me out?
You need to store it
//store current src in a attribute
$(".commentImg").attr('data-src', function() {
return $(this).attr('src');
})
$(".commentImg").hover(function() {
var swap = $(this).attr("data-swap");
$(this).attr('src', swap);
}, function() {
var src = $(this).attr("data-src");
$(this).attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="commentImg" src="//placehold.it/64/ff0000" data-swap="//placehold.it/64/ff00ff" />
<img class="commentImg" src="//placehold.it/64/00ff00" data-swap="//placehold.it/64/ffff00" />
<img class="commentImg" src="//placehold.it/64/0000ff" data-swap="//placehold.it/64/00ffff" />
I found another solution which do accomplish the task and is also useful if you have many images. Here is the code. Might help someone out there,
HTML
<div class="large-8 columns commentWrap">
<img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns inline_rply">
<img class="replyImg" src="images/reply.png" data-swap="images/reply_hover.png" alt="">
<p class="dash_reply">Reply</p>
</div>
<div class="large-2 columns reportWrap">
<img class="reportImg" src="images/report.png" data-swap="images/report_hover.png" alt="">
<p class="inline_rep">Report</p>
</div>
jQuery
var sourceSwap = function() {
var $this = $(this);
var newSource = $this.data('swap');
$this.data('swap', $this.attr('src'));
$this.attr('src', newSource);
}
$('.commentImg').hover(sourceSwap, sourceSwap);
$('.replyImg').hover(sourceSwap, sourceSwap);
$('.reportImg').hover(sourceSwap, sourceSwap);
I have series of images that I want to play them as a series of animation in html
<img src='image1.png' />
<img src='image2.png' />
<img src='image3.png' />
<img src='image4.png' />
<img src='image5.png' />
<img src='image6.png' />
<img src='image7.png' />
<img src='image8.png' />
<img src='image9.png' />
<img src='image10.png' />
<img src='image11.png' />
<img src='image12.png' />
They all need to on the same position but just swap very fast from image 1 to image 12 to make it looks like an animation.
Is there a way to do this properly? I have searched google but had no luck. Thanks for the help!
The best way is only to have one Image and only change the image src attribute. Like
<img src="image1.png" id="animationImage" />
Afterwards you can simply change for example with an setInterval:
var imageId = 1;
window.setInterval("changeImage()", 100);
function changeImage(){
imageId++;
if (imageId > 12)
imageId = 1;
$("#animationImage").attr("src", "image" + imageId + ".png");
// if you are NOT using jQuery, use this line instead:
document.getElementById("animationImage").src = "image" + imageId + ".png"
}
of course you can also simply hide/add the images:
HTML
<img src="image1.png" class="animationImage" />
<img src="image2.png" class="animationImage" />
<img src="image3.png" class="animationImage" />
<img src="image4.png" class="animationImage" />
<img src="image5.png" class="animationImage" />
<img src="image6.png" class="animationImage" />
<img src="image7.png" class="animationImage" />
<img src="image8.png" class="animationImage" />
<img src="image9.png" class="animationImage" />
<img src="image10.png" class="animationImage" />
<img src="image11.png" class="animationImage" />
<img src="image12.png" class="animationImage" />
Javascript:
$(".animationImage:not(:first)").hide();
var imageId = 0;
window.setInterval("changeImage()", 100);
function changeImage(){
$($(".animationImage")[imageId]).hide();
imageId++;
if (imageId > 11)
imageId = 0;
$($(".animationImage")[imageId]).show();
}
In both examples, the number 100 represents the amount of milliseconds the application will wait before showing the next image.
Edit The last solution assumes to use the jQuery library.
Note: jQuery is required for this solution
I will do this using jQuery:
function swap()
{
var images = $("img");
var on = false;
for(var i = 0; i < images.length; i++)
{
if($(images[i]).css("display") != "none")
{
on = true;
$(images[i]).css("display", "none");
}
else if(on)
{
on = false;
$(images[i]).css("display", "block");
}
}
if(on)
{
$(images[i]).css("display", "block");
}
}
This will swap each image to the next in order when called:
$(document).ready(function(){
setInterval(function(){swap();}, 1000/30);
});
JSFiddle
This is a little bit different than another question I just had answered. i want
<img style="float:right;" src="/explore_btn.png"> to trigger the large image to load in the <div id="show_area">. So if achor has id="list" then load that image in show_area when explore_btn.png is clicked for that container. there will be 12 different containers with thumbnails. How can I do this correctly
<script>
$('#list img').on('click',function(){
var old_img = this.src;
var new_img =old_img.split('-150x150').join('')
$('#show_area').html('<img src="'+new_img+'" />');
});
</script>
<div id="show_area"> large image here </div>
<div class="container1">
<a id="list" href="#">
<img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
<div class="container2">
<a id="list" href="#">
<img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>footer</strong><br><br>
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
Change all id="list" to class="list" (because ID's must be unique) and then use this:
$('.list img').on('click',function(){
You can read this about ID attribute. You could actually change all the <a> elements with <div> instead... or why do you want to have <a> ?
So your code should look like:
<script>
$(document).ready(function () {
$('.list img').on('click', function () {
var old_img = this.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
$('.search_desc img').on('click', function () {
var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
var old_img = origin.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
});
</script>
I wrapped your code in a ready function so it's loaded after the page finished loading.
FIDDLE for testing