Have this block:
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).wrap(a);
});
})(jQuery);
and after that have link like <img src>... but I need <img src> before <a href="">
You can use after() instead of wrap
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).after(a);
});
})(jQuery);
Edit based on comments by OP, for changing image src
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).after(a);
$(this).attr('src', 'http://www.yoursite.com/images/img1.jpg');
});
})(jQuery);
insertBefore() inserts the elements before this, like so:
$(function() {
$("img").wrap('<div class="b-img"/>').each(function() {
$('<a />', {href: this.src, 'class': 'img-link'}).colorbox().insertBefore(this);
});
});
Also, there should be no need to check for all available image file extensions, if you have images that are svg etc, use a class instead.
Related
How can I preload image only when event starts, i.e. .scroll or .click ?
What happens now is, image loads along with website, and I want to prevent this from happening.
Thanks.
Use .one() , .appendTo()
$(element).one("click", function() {
$("<img src=/path/to/img/>").appendTo(/* target element */)
})
$(window).one("scroll", function() {
$("<img src=/path/to/img/>").appendTo(/* target element */)
})
Maybe something like this:
$(function() {
$('img').each(function() {
var self = $(this);
self.attr('data-src', self.attr('src'));
self.removeAttr('src');
});
var loaded = false;
function loadImages() {
if (!loaded) {
$('img').each(function() {
var self = $(this);
self.attr('src', self.data('src'));
});
loaded = true;
}
}
$('button').click(loadImages);
$(window).scroll(function() {
loadImages();
$(this).unbind('scroll');
});
});
if the javascript is executed after images are loaded you can try to change img src to data-src in html file.
You could create an image tag with the source in an data attribute:
<img data-src="your_image.jpg">
And then load it on an event:
$('body').on('click', function(){
$('img[data-src]').each(function(i, img){
$img = $(img);
$img.attr('src', $img.data('src'));
$img.removeAttr('data-src');
});
});
This should work
$(function(){
$(document).one("scroll, click", function(){
loadImages();
})
})
Here loadImage is a function which will load your images on click/scroll event. "one" method will make sure that it only happens only once else you will end up loading images every time someone click or scroll.
var src = 'location/file.jpg';
$(document).on('click', function(){
$('target').append('<img src="' +src+ '" />');
});
I have a site, where I need to get all the images for eu.site.com, but the images are on us.site.com.
I would like to replace source on all of the images. Current function, that does not work:
$('img').each(function () {
var src = $(this).attr('src');
$(this).attr('src', src.replace(/_eu(\.[^.]+)?$/, '_us$1');
});
try something like this
$('img').each(function () {
this.src = this.src.replace("eu.site.com", "us.site.com");
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Automatically add an event handler to a newly created element using jQuery
I need to associate a jquery callback on a dynamic content.
For example:
<script type="text/javascript">
jQuery(document).ready(function() {
$("#createContent").click(function(){
$("#myCont").append('<img class="myImg" src="icon.png" />');
});
});
</script>
<span id="createContent">click me</span>
<div id="myCont"></div>
If I click over "Click me", it add a image..well, now I want associate a JQuery callback at all the created images, but if I add this code in the .ready(), it doesn't work.
$(".myImg").click(function(){
alert("click on img");
$(this).remove();
} );
There is a way to associate a JQuery callback on runtime?
Here, there is the example in jsFiddle: http://jsfiddle.net/fM8Z7/
Try this:
$("#createContent").click(function () {
var img = document.createElement('img');
img.setAttribute('class', 'myImg');
img.setAttribute('title', 'blabla');
img.setAttribute('src', 'http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png');
img.addEventListener('click', function () {
alert("click on img");
$(this).hide();
});
$("#myCont").append(img);
});
This will create 1 img element, set it's properties, add an event listener, then append the image to #myCont.
Or pure jQuery:
$("#createContent").click(function () {
var img = $('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />')
.click(function () {
alert("click on img");
$(this).hide();
}
);
$("#myCont").append(img);
});
Try this:
jQuery(document).ready(function() {
var i = 0;
$("#createContent").click(function(){
$("#myCont").append('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />');
$(".myImg").eq(i).click(function() {
$(this).fadeOut('slow');
});
i++;
});
});
Demo
try this...
this append the element and initailize click to the appended element only
jQuery(document).ready(function() {
$("#createContent").click(function(){
var appendedItem= $('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />');
appendedItem.appendTo("#myCont")
.click(function(){
alert("click on img");
$(this).hide();
}
);
});
}) ;
fiddle here
This should do the magic:
jQuery(document).ready(function() {
var i = 0;
$("#createContent").click(function(){
$("#myCont").append('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />');
$(".myImg").eq(i).click(function() {
$(this).fadeOut('slow');
});
i++;
});
});
DEMO
Try this
jQuery(document).ready(function() {
$("#createContent").click(function(){
$("#myCont").append('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />');
} );
$("#myCont").on('click', function(event){
alert("click on img");
$(event.target).hide();
});
});
Since the class ".myImg" doesn't exist when you bind the event, you have to bind the click event to an existing element. You can get the image which is clicked using the "event" object.
You can filter image tags using tagName attribute of event.target
Explore jquery event object for further data.
This method helps in avoiding multiple bindings.
I want to toggle two separate properties on a click event:
1) An image within a div - toggling the src attribute
2) The absolute positioning of the div - toggling the animate("top":"0px") bit
Here's the HTML
<div id="emailme">
<a id="email" href="mailto:xxx#gmail.com">xxx#gmail.com</a>
<div id="emailmecopy">email me</div>
<img id="emaildown"src="images/downbutton.png">
</div>
Now I've sorted the src toggling, but can't work out how to toggle the animation bit:
$("#emailme img").on({
'click': function() {
var src = ($(this).attr('src') === 'images/downbutton.png')
? 'images/upbutton.png'
: 'images/downbutton.png';
$(this).attr('src', src); //THIS TOGGLES THE IMAGE SRC
//BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and
//("top":"-50px") IN THE SAME CLICK??
}
});
Any help much appreciated!
if($("#emailme img").css('top') == '0px'){
$("#emailme img").stop().animate({top:'-50px'},1000);
};
if($("#emailme img").css('top') == '-50px'){
$("#emailme img").stop().animate({top:'0px'},1000);
};
also check this out:
$('body').on('click', '#emailme img', function (e){
$(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png');
if($(this).css('top') == '0px'){
$(this).stop().animate({top:'-50px'},1000);
};
if($(this).css('top') == '-50px'){
$(this).stop().animate({top:'0pg'},1000);
};
});
If you refactor your code a bit you can do it like this. I suppose this is what you were looking for...
$("#emailme img").on({
'click': function() {
var $this = $(this);
var src = $this.attr('src');
var isUp = src === 'images/upbutton.png';
var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png';
$this.attr('src', newSrc)
.animate({ top: (isUp ? '-50' : '0') +'px' });
}
});
I am using jquery and what I want to do here is to be able to set the image that will show up based upon the link that is being hovered to.
<script type='text/javascript'>
$(function(){
$('img').hide();
$('a').mouseenter(function(){
var currentimg= $(this).html();
alert(currentimg);
$("img[src=currentimg.jpg]").show(); //I want to use currentimg variable here for the name of the jpg file
});
$('a').mouseleave(function(){
$('img').hide();
});
});
</script>
You can just concatenate the string for use, for example:
$("img[src='" + currentimg +"']").show();
Just to note, there's also a .hover() shortcut for .mouseenter(handler).mouseleave(handler), like this:
$(function(){
$('img').hide();
$('a').hover(function(){
var currentimg = $(this).html();
$("img[src='" + currentimg +"']").show();
}, function(){
$('img').hide();
});
});