For http://jsfiddle.net/7HWxu/2/ I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change. Any help greatly appreciated. Thanks,
Tom
The issue is that in this code:
<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)
I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:
// Your original code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').
fadeOut().
next('img').
fadeIn().
end().
appendTo('.fadein');
}, 6500);
// Addenda
$("#Table_01").delegate("img", "click", function(e) {
// Show and hide images here based on what e.target is.
});
});
There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>
Related
I am trying to change an image using jquery upon clicking. So when I click on an image it appears on the viewport then I click on another image above it and it changes to that image and then a third. When I try it only clicks on one image.
HTML CODE:
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
jQuery Code:
$("#vacationimages", "src").click(function(){
$("#firstname").text("");
$("#bigimage").show("slow");
var myfirst = $("#firstname").val();
$("#currentimage").attr("src", "ocean.jpg");
$("#currentimage").attr("src", "desert.jpg");
Only the 2nd image displays despite me having different images on the same page.
Use "on" vs. "click" because it will then work for dynamically added elements, and save you headaches later. After that it's simply populating the image properties with those you gathered from the clicked image or $(this) in the scope of your function.
$(function() {
$("#vacationimages img").on("click", function() {
$("#currentimage").attr("src", $(this).attr("src"));
$("#imagedesc").html($(this).attr("alt"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation">
<img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation">
<img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="" alt="">
<p id="imagedesc"></p>
</div>
Another common approach in a scenario like this is to use an anchor tag around the img (<a>) and populate it's rel attribute with a larger source image, if what you're going for is click a thumbnail to view a larger image. In that case you bind the event listener to the anchor (not the image) and change the src to the anchor's rel (as opposed to the src of the img inside the anchor).
$("#vacationimages img").on("click",function(){
$("#bigimage img").attr("src",$(this).attr("src"));
$("#bigimage p").text($(this).attr("alt"));
});
$("#submitme").on("click",function(){
$("#mymessage").text($("#name").val()+" You want a "+$("#imagedesc").text());
});
img
{
height:32px;
width:32px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<label>Name:<input type="text" id="name"></label><br><br>
<img src="https://image.flaticon.com/icons/png/128/181/181549.png" alt="Mountain Vacation"><img src="https://image.flaticon.com/icons/png/128/148/148766.png" alt="Desert Vacation">
<img src="https://image.flaticon.com/icons/png/128/138/138662.png" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
<br><br>
<div id="submitdiv"> <input id="submitme" type="button" value="Submit ME"> <p id="mymessage"></p> </div>
Here is the code that I want to hide:
<div class="feedflare"><img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=yIl2AUoC8zA"> <img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=qj6IDK7rITs"></div>
I don't know that much about coding and I don't know if this is possible...
And here is the example page: http://www.highbroadcast.com/2017/09/buy-gold-for-long-term-as-fiat-money-is.html
Here is the picture of elements that I want to hide:
If you can edit the HTML then the simplest way would be with inline CSS:
<div class="feedflare" style="display: none;">
You can use javascript for this using the class,
document.getElementsByClassName('feedflare')[0].style.display = 'none';
<div class="feedflare"><img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=yIl2AUoC8zA"> <img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=qj6IDK7rITs"></div>
Or, if you want jquery then,
$(document).ready(function(){
$('.feedflare').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feedflare"><img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=yIl2AUoC8zA"> <img border="0" src="http://feeds.feedburner.com/~ff/Maxkeisercom?d=qj6IDK7rITs"></div>
I'm trying to use a script to change the visibility of a div if an image inside it is missing
here is the div:
<div id="bike01">
<a href="stock/bike1.html">
<table width="900" border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
<td width="245" rowspan="2"><img id="bike1" src="stock/bike1/images/image1.jpg" name="bike1" width="245" height="184" />
</td>
<td width="468"><div id="title1"></div></td>
</tr>
<tr>
<td colspan="2"><div id="desc1"></div></td>
</tr>
</table>
</a>
</div>
and here is my script (I am a complete beginner when it comes to scripting - ive just picked this up from researching my question)
<script>
$("#bike1").error(function () {
$("#bike01").css({visibility:"hidden"});
});
</script>
Basically if the img#bike1 is missing i want the whole div #bike01 to disappear.
Why not do:
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror="this.style.display='none';" />
How do I hide broken images in javascript?
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror='$("#bike01").css({visibility:"hidden"});' />
Try this:
<script>
$("#bike1").on('error', function() {
$("#bike01").hide();
});
</script>
I have Auto-Generated Code in our CMS based Website like this
<td class="photogalleryItem">
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
I want to copy that href title or Image alt value and insert as below
<td class="photogalleryItem">
<!--Like This <h3 style="text-align:center;">Test</h3>-->
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
How can i do that in using javascript or Jquery.
This code is in Gallery page. so this is repeating for every images
If you have single td with class photogalleryItem,You can use:
$('.photogalleryItem').append('<h3 style="text-align:center;">'+ $('.photogalleryItem').find('img').attr('alt')+'</h3>');
If you have multiple td with class photogalleryItem:
$('.photogalleryItem').each(function(){
$(this).append('<h3 style="text-align:center;">'+ $(this).find('img').attr('alt')+'</h3>');
})
Try this code
$('.photogalleryItem').each(function () {
$(this).prepend('<h3 style="text-align:center;">' + $(this).find('img').attr('alt') + '</h3>');
});
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});