to add a click-to-zoom feature to images, I used the following code to toggle a class:
$(document).ready(function() {
var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
if (imageLinks.children('img').length) {
imageLinks.children('img').each(function() {
$(this).attr('title', '(click to enlarge image)');
});
imageLinks.click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
}
});
Now my problem is, I could have text links, like <a href='file.png'>text</a> as well on that page, and they are broken by this code.
Is there a way to select only image links (<a href='file.png'><img src='file.png'></img></a>) instead of all links to image files?
Thanks in advance!
You could use has statement:
var imageLinks = $('a').filter(':has(img)');
Or the same:
var imageLinks = $('a:has(img)');
I believe this will work:
var $images = $('a > img');
$images.attr('title', '(click to enlarge image)');
$images.parent().click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
Example jsFiddle: http://jsfiddle.net/UHkh7/
You can change the selector to 'a img' if the img is not always a direct descendent of the a tag, however you will then need to change $images.parent() to $images.parents('a')[0]
Related
<div class="albumclass">
<img width="100" height="100" data-assigned-id="9" src="/Content/images/fold.png">
<p>15Sep2015</p>
</div>
The above code is generated dynamically through jQuery. After that I need to display the content of <p> ie., '15Sep2015' by clicking on the above image. How can I get this? I used the below code:
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("p").text();
alert(txt);
}
But that alerts nothing.It not possible to take content implicitly because a lot of similar div will be there.
The .closest() gets the parent. So use .siblings() or .next. I have used .next():
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).next("p").text();
alert(txt);
}
You can go up to parent div and find p using find() :
$('.album_inner').on('dblclick', '.albumclass img', function (e) {
var txt = $(this).closest("div").find('p').text();
alert(txt);
}
Hope this helps.
$('.albumclass').on('click', function(){
var p_text = $(this).children('p').text();
alert(p_text);
});
Why not try adding a class to the 'p' tag so that u can get the element by a class selector and see
var text = $('.class').text();alert(text);
or u may try
$(document.body).on('click','.class',function(){
});
I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});
You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})
Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/
You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
I am trying to figure out how to reduce this code down! it basically hides an image then show a div depending on what image map area is clicked!
I have a code pen of a working demo here: http://codepen.io/naniio/pen/wBExYq
$(document).ready(function() {
$(".auckland").click(function() {
$(".map").toggle();
$("#aukl.hide").toggle();
});
$(".gisborne").click(function() {
$(".map").toggle();
$("#gisb.hide").toggle();
});
$(".wellington").click(function() {
$(".map").toggle();
$("#well.hide").toggle();
});
$(".nelson").click(function() {
$(".map").toggle();
$("#nel.hide").toggle();
});
$(".christchurch").click(function() {
$(".map").toggle();
$("#chch.hide").toggle();
});
$(".queenstown").click(function() {
$(".map").toggle();
$("#queen.hide").toggle();
});
$(".otago").click(function() {
$(".map").toggle();
$("#ota.hide").toggle();
});
});
I have tried using find and other jquery methods but I must be looking in the wrong places
Any help would be great I'm new to jQuery but not new to stack overflow I can imagine this is an easy question/fix for some and this may be rated harshly or ignored! but for those who continually help this community regardless, thanks! :)
I have something working in this pen. http://codepen.io/anon/pen/ByOEam
Just add an extra attribute in the area tags
$(document).ready(function() {
$(".clickable").click(function() {
var toHide = $(this).attr('data-hide');
$(".map").toggle();
$("#"+toHide).toggle();
});
$(".hide").click(function() {
$(".map").toggle();
$(this).toggle();
});
});
A little refactoring to <area> tags like this
<area shape="circle" coords="220,97,15" alt="Auckland" title="Auckland" href="#" data-ref="aukl.hide">
would cleanup your html from unnecessary classes and would give you cleaner javascript code:
$(document).ready(function() {
$("map area").click(function() {
$(".map").toggle();
$("#" + this.data("ref")).toggle();
});
});
Add class to the all the div that will be clicked, say "lands", and use following code,
$(".lands").click(function() {
var $this = $(this);
$(".map").toggle();
$this.toggle();
});
Try this reduced jquery code
$(document).ready(function() {
$('.box').on('click',function(){
$(".map").toggle();
$(this).toggle();
});
});
Every time you need to add the same behavior to many different objects probably a good pattern is to use a function and dynamic creation.
For example in your specific case I'd expect to have
An image with the map (without dots)
A list of locations (possibly retrieved from a DB)
Code that for each of the locations creates the dot image correctly positioned on the map
Something like:
function addLocation(x, y, name, data) {
var dot = document.createElement("img");
dot.className = "dot";
dot.onload = function() {
// x,y coordinates are relative to map size to account
// for responsive designs
dot.left = (x*mapContainer.offsetWidth - dot.offsetWidth/2) + "px";
dot.top = (y*mapContainer.offsetHeight - dot.offsetHeight/2) + "px";
mapContainer.appendChild(dot);
};
dot.src = "dot.png";
dot.onclick = function() {
showMap(name, data);
};
}
This way adding/changing a location only requires updating the database (or the static data array if using a database is not worth at the moment).
Adding by hand location names and chart names (that are random small variations one of the other like gisborne->gisb but christchurch->chch) is a step toward making the page a maintenance nightmare.
when click on More Button the picture of More button and Featured will be changed and when you click agin on the More button the image should be the same as what it was the first, but it isn't.
$(document).ready(function(){
$('#buy_now').hide();
$('#more').click(function() {
$("#more-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
$("#featur-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
$('#buy_now').toggle();
});
});
You need to store the original source then restore it. Best approach is using .toggle() for the button and .data to store the original source:
$(document).ready(function(){
var btnMore = $("#more-btn");
var btnFeature = $("#featur-btn");
btnMore.data("org_src", btnMore.attr("src"));
btnFeature.data("org_src", btnFeature.attr("src"));
$('#buy_now').hide();
$('#more').toggle(function() {
btnMore.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
btnFeature.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
$('#buy_now').show();
}, function() {
btnMore.attr("src", btnMore.data("org_src"));
btnFeature.attr("src", btnFeature.data("org_src"));
$('#buy_now').hide();
});
});
Live test case. (with cute cats :))
How to rewrite image path of following img tag with new image path while click on span element
<span id="cc-element-1">
<img src="http://localhost/example/orig/abc.jpg"/>
</span>
Expected result as follows,
<span id="cc-element-1">
<img src="http://localhost/example/cloned/abc.jpg"/>
</span>
$('#cc-element-1').click(function() {
var $img = $(this).children('img');
$img.attr('src', $img.attr('src').replace(/orig/, 'cloned'));
});
If doing a read-modify-write on an attribute you should use the callback function based version of .attr over the code given by #Sahil:
$('#cc-element-1').click(function() {
var $img = $(this).children('img');
$img.attr('src', function(index, val) {
return val.replace(/orig/, 'cloned'));
});
});
This avoids the need to call $img.attr(src) twice - once to read and once to write.
It's therefore more efficient, particularly so if the original selector is non-trivial.
$("#cc-element-1 > img").click(function() {$(this).attr('src', 'http://localhost/example/cloned/abc.jpg')})
try something like this:
var newSrc = 'http://localhost/example/cloned/abc.jpg';
$('span#cc-element-1').click(function(){
$(this).children('img').attr('src', newSrc);
});
See an example here:
http://jsfiddle.net/expertCode/FdgzJ/