Show/hide trigger by on_click - javascript

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

Related

Populate images via JS in lightbox?

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();
});
});

Clicking an image to change the url of a button

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>

Js: getElementById

I have a list of image like this:
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>
I want to be able to insert the images to a div tag when I click on any of them.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
Thanks
You can do it with jQuery:
jQuery('a').on('click', function(){
var pic = jQuery(this).html();
jQuery('#imgResult').html(pic);
});
https://jsfiddle.net/1o4ngjnc/
Try like this by using onClick.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>
function myFunction(elment) {
// Copy the <li> element and its child nodes
var cln = elment.firstChild.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("imgResult").appendChild(cln);
}
<div id="imgSorce">
<img width='100px' height='100px' src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg"/>
<img width='100px' height='100px' src='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg'/>
</div>
<div id="imgResult"></div>
As you tag with jquery, you can do like below:
Find the <img> inside the clicked <a>. It's $(this).children('img')
Clone it. It's .clone()
Before move the picture to #imgResult, clear anything inside it.
$('#imgResult').empty()
Edited: If image needs to stay, don't do the step 3, which means replace
$('#imageResult').empty() to simple $('#imageResult')
Put the cloned image to #imageResult. It's .appendTo($('#imgResult'))
$('a').click(function() {
$(this).children('img').clone().appendTo($('#imgResult'));
});
img {
max-width: 300px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgSorce">
<img src="https://i.imgur.com/cWCw1q2.jpg"/>
<img src='https://i.imgur.com/4EiQldb.jpg'/>
</div>
<div id="imgResult"></div>
Here is the code in pure Javascript:
function myFunction(clicked_id) {
document.getElementById("imgResult").innerHTML = "<img src='" + document.getElementById(clicked_id).getAttribute("src") + "'/>"
}
<div id="imgSorce">
<a href="#" ><img onclick="myFunction(this.id)" id="img1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg"/></a>
<a href="#" ><img onclick="myFunction(this.id)" id="img2" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"/></a>
</div>
<div id="imgResult"></div>
You may simply replace the innerHTML:
function myFunction(el) {
document.getElementById("imgResult").innerHTML = el.innerHTML;
//in case you want to keep appending images insted of replacing the old one, use `+=`
//document.getElementById("imgResult").innerHTML += el.innerHTML
}
<div id="imgSorce">
<a onclick="myFunction(this);" href="#">
<img src="images/img1.png" />
</a>
<a onclick="myFunction(this);" href="#">
<img src='images/img2.png' />
</a>
</div>
<div id="imgResult"></div>

Cause different images to appear through javascript links

Trying to figure out how to make it when I click on three seperate links it makes a different image for each link clicked appear.
Code for javascript is:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="images/deal_men.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_teen.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_couples.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
});
</script>
HTML being affected is:
<div id="imagelink">
<div align="left"> <img src="images/for_men_btn.fw.png" alt="For Men" />
<a href="#">
<img src="images/for_couples_btn.fw.png" alt="For Couples" />
</a>
<a href="#">
<img src="images/for_teens_btn.fw.png" alt="For Teens" />
</a>
</p>
</div>
<div class="deal_content">
<p id="clickstructions"> </p></div>

fading in and out an image using javascript

I have the code right so that when I click the image link jquery puts the image where it should be and at the proper size. However, I can't figure out what code to use in the javascript so that when I click the image again. It removes the current content from the div and puts it back in again instead of repeatedly putting the image in the div?
Here is the javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
$('img').fadeToggle([normal]);
});
});
</script>
Here is the HTML it is effecting:
<div class="deal_content">
</div>
<div id="content">
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</p>
</div>
Not sure if this is what you are asking for?
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle();
});
});
A simple if should be able to detect if there's already an image inside your element:
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
if ($('.deal_content img').length > 0) {
$('.deal_content img').remove();
} else {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
}
return false;
$('img').fadeToggle([normal]);
});
});
</script>
The following fade toggles the current clicked image. In this case you need to use a delegated event (see documentation) to make it work on images that are appended dynamically.
$(document).ready(function() {
$('.deal_content').on("click", "img", function() {
$(this).fadeToggle("normal");
});
});
Then add a separate event handler for your link to append the images:
$('#imagelink a').click(function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
});

Categories