jQuery Wildcare Image Source - javascript

I am trying to change a part of an image src for an A/B test but after reading tons of articles I am getting more and more confused. This is the image URL (it is part of a resultlist-item):
http://pic.test.net/images-small/001/002/123456.jpg
and I have to change /image-small/ to /image-big/.
Parts of the URL are dynamic (e.g. /001/) so my idea was to use some kind of wildcard for those parts. This is my version for a static URL:
$("#resultlist-item").attr({"src":"http://pic.test.net/images-big/001/002/123456.jpg"});
It is working but I have no idea how to do it for a dynamic URL.
Any ideas?
Many thanks,
Joe

Try this:
<!-- SOME HTML AND ETC... -->
<div id="gallery">
<img src="http://pic.test.net/images-small/001/002/123456.jpg" />
<img src="http://pic.test.net/images-small/001/002/1234567.jpg" />
<img src="http://pic.test.net/images-small/001/002/1234568.jpg" />
</div>
<!-- SOME HTML AND ETC... -->
<script>
$(function(){
var $imagesContainer = $('#gallery');
$imagesContainer.find('img').each(function(){
var src = $(this).attr('src');
if(src.indexOf('images-small/')>-1) {
src = src.replace('images-small/', 'images-big/');
$(this).attr('src', src);
}
});
});
</script>

Related

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

JQuery each function to fill array with attributes from HTML images

I'm trying to load an array filled with the src attribute from a series of img tags in my HTML document.
HTML:
<html>
<head>
<title>
JQuery Slider
</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id = "wrapper">
<h1 class="dark-header">2014 Salt Lake Comic Con FanX</h1>
<div id="background-img">
<img src="img/img01.jpg"/>
</div>
<div>
<img src="img/img02.jpg"/>
</div>
<div>
<img src="img/img03.jpg"/>
</div>
<div>
<img src="img/img04.jpg"/>
</div>
<div>
<img src="img/img05.jpg"/>
</div>
<div>
<img src="img/img06.jpg"/>
</div>
<div>
<img src="img/img07.jpg"/>
</div>
<div>
<img src="img/img08.jpg"/>
</div>
<div>
<img src="img/img09.jpg"/>
</div>
<div>
<img src="img/img10.jpg"/>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function() {
var source = new Array();
$('img').each(function(attr) {
source.push($('img').attr('src'))
});
console.log(source)
});//end document.ready
The output to the console is an array of 10 elements, but only using the first img attribute. I'm not sure how to get the each function to go through all elements and push them to the array.
Your issue is that $('img').attr('src') will always return the value of the first element in the collection of elements.
As pointed out in comments , you need to look at specific instances within your loop
Another way you can do this is using map() which will create the array for you
var source = $('img').map(function(){
return $(this).attr('src');
}).get();
DEMO
You could try something like this:
var source = [];
$('img').each(function() {
source.push( this.getAttribute('src') );
});
In your each code, you re-select the entire group with $('img') so it is only adding the first one of THAT Selection to your array.
OR
If you aren't using jQuery for anything else, you could do it in straight javascript like this:
document.addEventListener('DOMContentLoaded', getImgAttr);
var source = [];
function getImgAttr() {
var imgs = document.querySelectorAll('img');
[].forEach.call(imgs, function( img ) {
source.push( img.src);
});
}
you need to use 'this' while inside the loop to reference the image, otherwise you are getting the reference to first 'img ' tag.
it should be like this:
$('img').each(function(attr) {
source.push($(this).attr('src'))
});
Your callback function needs to accept a second param...
The first param is the current index of the array and the second param is the object at that index.
You may also utilize the keyword this as suggested above.
Based on my answer your code would look like this:
$('img').each(function(i, img) {
source.push($(img).attr('src'));
// alternatively -> source.push($(this).attr('src'));
});
A second option you may like and puts what you're trying to do onto a single line would be to use the jQuery map function...
var source = $.map($('img'), function(img) { return $(img).attr('src'); });

Onclick Remove/delete image

I need to load an .swf file after we click on an image
The .swf file loads successfully after we click on the image,but it loads the .swf below the image.I need to replace the img with .swf(in short,hide the img).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
}
document.getElementById('iii').style.display = 'none';
</script>
<p><a href="http://www.leconcombre.com/stock/coccyminimini1.swf" onclick="loadSWF(this.href); return false;">
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
</a></p>
<div id="flashcontent"></div>
I need to hide/remove the class/id "iii" (within which the img tag lies).However the code doesn't seem to work only with respect to hiding/removing of img. Any tips?
I think this is what you're looking for.
I made a js fiddle for you.
http://jsfiddle.net/q7a96h14/1/
html
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
js
$(function(){
var $img = $("#my_image17")
, $container = $("#iii");
$img.on("click", function() {
$img.remove();
$container.html("<embed src='http://www.leconcombre.com/stock/coccyminimini1.swf' width='550' height='400'/>");
$container.removeClass().removeAttr("id");
});
});
Looks like ...
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
document.getElementById('iii').style.display = 'none';
}
... the hide should occur when the load does.

click handler in capty plugin

I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.

How to show/hide big image by clicking on thumbnails?

How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too
See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/

Categories

Resources