I have 3 images which each have an onclick and a parameter passed. Here's the HTML:
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>
What I need to do is have a function which gets the img src value of the myfunction passed parameter. So for example:
myFunction(id) {
$('body').html(/* passed parameter's img src here */);
}
How can I do this?
You can pass this as a parameter to the function which will be a reference to the clicked div element. You can then get the child img and read the src attribute.
However a much better solution would be to use unobtrusive event handlers over outdated on* event attributes. Try this:
$('.thumbnail').click(function() {
var $thumb = $(this);
console.log($thumb.data('foo'));
console.log($thumb.find('img').attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="1">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="2">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="3">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>
Onlcick of respective divs image src can be get using var imgSrc = "assets/placeholders/sliders/slider" + id + ".png"; and it can be used as per need.
Please check working snippet.
function myfunction(id) {
//Get image src on click on the respective divs
var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";
console.log(imgSrc);
//$('body').html( passed parameter's img src here );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Add an id attribute to your img tags and give them your id parameter.
<img id="1" ... />
<img id="2" ... />
<img id="3" ... />
In your script you can fetch them with jQuery.
myFunction(id) {
var src = $('#' + id).attr('src');
$('body').html(src);
}
However, there multiple ways to achieve this.
Using onclick attribute you can pass this keyword in myfunction which represents the current element, and then look for the src attribute.
function myfunction(e){
var src = $(e).find('img').attr('src');
alert(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Even though you can achieve the desired outcome, this way of using onclick attributes for Javascript is not a good practice. Javascript developers recommend you should always put javascript entirely in a separate file.
$(document).ready(function(){
$('.thumbnail').on('click', function(){
var src = $(this).find('img').attr('src');
alert(src);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Related
<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great
I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.
If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';
You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I have some itemBox，I need to click itemBox and call the workItem which has same id number to SildeUp(the workItem is hidden at the beginning).
When one of workItem SlideUp，others would be hidden.
<div class="container">
<div class="row">
<div class="wrapper">
<div class="itemBox" id="item0">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
<div class="itemBox" id="item1">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
</div>
</div>
</div>
<div class="workContent">
<div class="workItem" id="work0" style="background-color:#000000;">
<h2>demo1</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
<div class="workItem" id="work1" style="background-color:#333333;">
<a class="close" href="javascript:">x</a>
<h2>demo2</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
</div>
How can I do this with javascript or Jquery?
this is simple (i used jQuery):
$(".itemBox").click (function(){
$("div[id^=work]").hide();
var id = $(this).attr("id");
var number = id.match(/item([0-9]+)/));
if (number[1])
$("div[id=work" + number[1] + "]").show();
})
The code below shows 3 images per row for desktops. When viewed on a mobile phone it shows 2 images, then 1, then 2, then 1, then 2, etc.
How can I make it when mobile to have 4 rows of 2, and still keep the 3 rows of 3 for desktop?
Thanks
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
Use the following format
(container)
row
col-md-4 col-xs-6
col-md-4 col-xs-6
...(6x)
The columns will wrap below each other, so on medium views, you'll get 3 columns in a row, and on mobile views, 2 columns in a row.
If the trailing columns bother you, just add the classes col-xs-offset-3 and col-md-offset-2 (for example). The offsets will changed based on view. You can image this offset as an "invisible" column placed before the first in that new row.
Try this :
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4"><img class="images img-responsive" src=""></img>
</div>
</div>
Pull all inside single row class and Use col-sm-4 col-xs-6
For width (≥768px) col-sm-4 will work and for width (<768px) col-xs-6 will work.
I'm working on a site, with 2 photo sliders from "owl-carousel".
The first slider works perfectly, but the second slider places all the photo's under each other.
Is it a problem in the jquery or just in the html?
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- portfolio media -->
<div class="portfolio-images">
<!-- image slider -->
<div id="owl-portfolio1" class="owl -carousel">
<div class="item active"> <img src="images/print1.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#owl-portfolio").owlcarousel({
});
$("#owl-portfolio").owlcarousel({
});
});
</script>
</div>
Have you made sure each has a specific id selector like #owl-carousel-1 and #owl-carousel-2 then activate each one individually with the initiation code, changing the selector to suit each case.
<div id="owl-carousel-1" class="owl-carousel" >
<!-- the carousel -->
</div>
<div id="owl-carousel-2" class="owl-carousel" >
<!-- the second carousel -->
</div>
<script>
$(document).ready(function() {
$("#owl-carousel-1").owlCarousel();
$("#owl-carousel-2").owlCarousel();
});
</script>