Onclick Remove/delete image - javascript

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.

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>

Load default image when error dynamic image

I need to load a default image in the event that the image is broken. This also needs to apply to dynamic images. Always limited by class.
I found a similar question Jquery on image error not working on dynamic images? but it doesn't seem to work for dynamic images in my case
DEMO https://jsfiddle.net/sb8303aq/1/
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
});
you can put error function into append function.
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
$('img').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://image_doesn-t_exist_url" class='myClass' />
<p>
<button>
Add Image
</button>
</p>

jQuery Wildcare Image Source

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>

Bootstrap and FancyBox: Take the img ALT attribute and use it as a caption?

I'm using Bootstrap with the Fancybox plugin and trying to get a thumbnail ALT attribute and use it as a caption below the photo like so: FancyBox demo
However, taking that idea and implementing it with my Bootstrap demo gets the code working fine except that the ALT attribute is nowhere to be seen in action. Note: Only testing the first photo of my gallery at the moment.
My code:
<a class="thumbnail fancybox" rel="lightbox" href="http://placehold.it/400x400.png">
<img class="img-responsive" alt="First title here" src="http://placehold.it/200x200" />
<div class="text-center">
<small class="text-muted">Image Title</small>
</div> <!-- text-center / end -->
</a>
The script at the bottom of my page is:
<script>
$(document).ready(function(){
$('.fancybox').fancybox();
});
</script>
<script>
$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
</script>
What am I doing wrong?
You have init fancybox 2 times, try just using the script:
<script>
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
</script>
REMOVE this:
<script>
$(document).ready(function(){
$('.fancybox').fancybox();
});
</script>
PS: may be add document ready to the second fancybox init should work, but remove the unecessary code will be better

change hyperlink image on click

Hi I'm trying to change the image of hyperlink on-click as follows. But the image of the select button is not changing to loading.gif. What am I doing wrong? I'm new to jquery. Thanks in anticipation
<HTML><HEAD>
<SCRIPT type=text/javascript src="jquery.js"></SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TBODY>
<TR>
<TD><A id=webservice_submit href="javascript:document.frm_correction.submit()" jQuery1365443220846="2">
<IMG onmouseover="MM_swapImage('Correction subj','','http://localhost:6868/corrmgr/img/select_up.gif',0)" onmouseout=MM_swapImgRestore() name="Correction Subj" alt="Correction Subj" src="http://localhost:6868/corrmgr/img/select.gif" oSrc="http://localhost:6868/corrmgr/img/select.gif">
</A></TD></TD></TR></TBODY></TABLE>
<DIV style="DISPLAY: none" id=loading jQuery1365443220846="3"><IMG name="Please wait..." alt="Please wait while the request is being processed..." src="http://localhost:6868/corrmgr/img/bert2.gif"> </DIV>
<SCRIPT language=javascript>
var $loading = $('#loading');
$('#webservice_submit').click(function(){
$loading.toggle();
if( $loading.is(':visible') ){
alert("invoking web services");
$('#image img').attr('src', 'http://localhost:63531/corrmgr/img/loading.gif');
return ($(this).attr('disabled')) ? false : true;
}
});
$('#loading').hide();
</SCRIPT>
</BODY></HTML>
Your selector is not right. Change this:
$('#image img')
to this:
$('#image')
And give <img> the corresponding id:
<IMG id="image" ...>
I think you want to assign the Loader Image to the below image tag
<IMG name="Please wait..." alt="Please wait while the request is being processed..."
src="http://localhost:6868/corrmgr/img/bert2.gif">
If i have understand you... you change your code like below...
FROM :
$('#image img').attr('src', 'http://localhost:63531/corrmgr/img/loading.gif');
TO :
$("img[name='Please wait...']").attr('src', 'http://localhost:63531/corrmgr/img/loading.gif');

Categories

Resources