I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.
Related
I am trying to write a function so that when I click on an image it loads external content.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg"></img>
</section>
$(document).ready(function(){
$("#lifeofpi").click(function(){
$("#lifeofpi").load("lifeofpi.txt #p1");
});
});
When I click on the image I want it to load this external content from a text document. But when I click on the image nothing happens.
You are trying to load content into the image. You need to add it to an element that can actually have children.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg">
<div id="lifeofpi_details"></div>
</section>
$(document).ready(function(){
$("#lifeofpi").on("click", function () {
$("#lifeofpi_details").load("lifeofpi.txt #p1");
});
});
$("#lifeofpi").on("click","#p1 lifeofpi.txt",function (e) {
e.preventDefault();
alert(this.id);
});
Read about event-delegation
Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin
So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>
I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected
I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
So i have this problem i couldn't get the html code of page using ajax from a userscript since the page loads only a bit of the page firstly before everything else so performing ajax from a userscript to get the whole page html is impossible. So i used an invisible i frame to bypass the problem. And it works fine. But my url always stays the same and i don't know why, i'm doing a .each() function on some <a> elements but something's wrong.
What i want to do is using the magnific popup library and open images in a popup. Basicly this part works but the url of the image doesn't change so no matter what image i click it's always the same image.
Here's my code
var link = '';
var link2 = '';
var iFrame = $('<iframe id="tempData" style ="display: none">').appendTo('body');
$("head").append('<link rel="stylesheet" href = "https://49535f300cc62ae84be0bc4341ad834057099639.googledrive.com/host/0B7xSofmydrHqMU9pRDJXTEtpQWc">');
$(document).ready(function() {
$('section[class="article"]').find("#intelliTXT").find('a').each(function(){
var that = $(this);
if (that.find('img').attr('src') != undefined){
iFrame.attr('src',that.attr('href'));
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
}
});
});
And somehow the link variable stays the same on every image i click. I don't know why. Any help please?
link2 is the url on the main page the one i have to access to find the actual image to show in the popup.
linkis the url of the image that has to be shown in the popup. And it's also the link that always stays the same. And it's always the last image of the page.
I made and alert to check if the link2 variable changes and it is changing so i should get a new link everytime the iframe is done loading but in magnificPopup function the link stays always the same
HTML
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00CE007400811425.jpg" alt="Senran Kagura Estival Versus 2015 07 13 15 005" width="206" height="116">
That's on the main page, there's some other link too. The img inside the is only a screenshot. The href in is the link to the second page where the image with the actual big size is located.
<section id="zoom" class="galerie">
<nav class="smalls clearfix">
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-001-811421-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-001_00DC007C00811421.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_001">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-007_00DC007C00811427.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_007">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" class="small active">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00DC007C00811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-004_00DC007C00811424.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_004">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-003-811423-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-003_00DC007C00811423.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_003">
</a>
</nav>
<div class="zoom">
<span class="big"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_0903D4000000811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005"></span>
<header>
<h1 class="titre">Senran-Kagura-Estival-Versus_2015_07-13-15_005</h1>
</header>
</div>
<div class="bup"> <script type="text/javascript">tmntag.adTag('side_ad');</script>
</div>
<a class="btn" data-icon="" href="/actualites/senran-kagura-estival-versus-premieres-images-ayame-combattante-264284-1">Retour au contenu</a>
</section>
This is on the second page. The image inside .big class is the image i clicked on the main page and it has it's real size. The link inside the img element of this .big class is the link i have to use. All the other images are only small screenshots of some other images i don't have to use them.
SOLUTION
Well, finally i managed to make it work, just create a different iframe for each link.
var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');
and then just append a new iframe to it in the each function
var iFrame = $('<iFrame>').appendTo(iFrameContainer);
link = iFrame.contents().find('.big').find('img').attr('src');
Looks like you are adding the same url to every iterated link. Try to iterate over images.
You can try with onload
iFrame.on('load', function() {
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
});
Demo is here.
When I click on any image, I want to get the path of that image. The problem here is that only the path of image 1 is being given every time.
Also, with that new src, i want to add that src in the image having id= cropimage
$(".img").click(function() {
var newsrc = $(".img").attr("src");
alert(newsrc);
});
Use $(this) inside click event handler to get the element that is clicked. $(this) inside event handlers is the element on which the event has occurred.
If you use $('.img'), it'll select all the elements having class img and when use attr on it, it'll return the attribute value of the first matched selector.
Demo
$(".img").click(function() {
var newsrc = $(this).attr("src");
$('#cropimage').attr('src', newsrc);
// Even Shorter Form
// $('#cropimage').attr('src', $(this).attr('src'));
});
#cropimage {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img class="img" src="http://www.w3schools.com/images/w3schools.png" />
<br/>
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" />
<div id="img-container">
<img src="" id="cropimage" />
</div>
Please check this link Js Fiddle it will help you.
$( ".img" ).click(function() {
var newsrc=$(this).attr("src");
//alert(newsrc);
$( "#cropimage" ).attr("src",newsrc);
});
I have two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image).
I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
I assume that you are using this library. Is this the case?
In my demo i copied your code and currently
it toggles the images.
Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
The call to elevateZoom is not working for me. Are you missing a reference?
If you are using elevateZoom than you have to provide the URL for the larger Image
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
And the matching javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Please ask additional questions or comment if i misunderstood you.