I want javascript to add this rel attribute rel="lightbox[1]" to all images from a given container when the page loads...
Is that possible?
<div id="otherimg">
<p><img src="" alt="" /></p>
<p><img src="" alt="" /></p>
<p><img src="" alt="" /></p>
<p><img src="" alt="" /></p>
</div>
$(function() {
$('#otherimg img').attr('rel', 'lightbox[1]')
})
this will add to only the img tags inside div with id otherimg
$(function() {
$('div#otherimg img').attr("rel", "lightbox[1]")
})
Related
Here is my HTML:
<img class="image" src="" />
<img class="image" src="" />
<img class="image" src="" />
<button onclick="changeImages()">Change the images</button>
Here is my JavaScript:
function changeImages() {
document.getElementsByClassName("image").setAttribute("src", "images/image.png");
}
How can I make my code so that when I click the button, all those images change?
Thanks
getElementsByClassName() returns a collection of elements which doesn't have methods for applying attributes. You need to iterate through the collection and apply the attributes you want to each of its items. Something like:
document.getElementsByClassName("image").forEach(function(image) {
image.setAttribute("src", "images/image.png");
});
I have a jQuery slider that I wrote in jQuery in WordPress site.
I want to enable it to play video if the src extension is "mp4".
Any ideas?
Here is an example of the HTML generated: (please note the first img src is a link to a video)
I would like to enable the visitor click play button to start the video.
<div id="img-container" style="width: 2828.1px; padding-right: 886px;">
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2015/12/VideoClip.mp4" height="1080" width="842" alt="" title="" style="height: 414px; width: 323px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railings.png" height="612" width="600" alt="" title="" style="height: 414px; width: 230px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railing-1.png" height="600" width="462" alt="" title="" style="height: 414px; width: 177px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div style="clear: left;"></div>
</div>
Here is the code I was looking for: (will replace every mp4 link with video tag):
$('.picture_holder .picture > img').each(function(index){
console.log("index="+index+" Video src = "+ $(this).attr('src') + "<<<");
let imgsrc = $(this).attr('src');
if (imgsrc.indexOf(".mp4") >0) {
console.log("want to replace");
$(this).parent().prepend('<video width="320" height="600" controls><source src="'+imgsrc+'" type="video/mp4"></video>');
$(this).remove();
}
});
It replaces the img element with video element.
I use parent().prepend() simply because replaceWith() is not working here.
Few fixes are still missing to place it correctly, but it works.
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>
I have the following code
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I want to add <a> before and after the image tag with jQuery. This would be the result:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
Edit: Details from comments
So far, I have tried like this:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
i have add like
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional information from comments
I want to use a different url for each image, like:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
You can do it using the JQuery wrap() function like so:
var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];
$("#slider img").each(function(index, value){
$(this).wrap("<a href='"+arr[index]+"'></a>");
});
Here is the JSFiddle demo
Use .wrap()
Wrap an HTML structure around each element in the set of matched elements.
Here you can store different url in custom attributes which can later be used to wrap element.
$('#slider img').wrap(function() {
return $('<a />', {
"href": $(this).data('url'),
"class" : "myClass"
});
})
.myClass {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img src="images/p1.jpg" data-url='facebook.com' />
<img src="images/p2.jpg" data-url='google.com' />
<img src="images/p3.jpg" data-url='example.com' />
</div>
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.