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>
Related
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
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>
Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>
Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.
I am trying to use owl carousel and echo.js for image carousel and and lazy loading.
Now the problem is only some of the images are loaded in the carousel. say 7 out of 10 is loading remaining 3 the echo js is not loading the image.
Why is this happening?
here is my code
<div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/univers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kelloggs.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pampers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pepsico.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/p-g.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/vini.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/itc.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/nestle.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/cadbury.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/coco.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kraft.jpg" src="assets/images/blank.jpg" alt="">
</a>
</div><!--/.item-->
</div><!-- /.owl-carousel #logo-slider -->
according to the docs here the default max of items is 5. So you need to set it to what you want. Like this
$(document).ready(function() {
$("#brand-slider").owlCarousel({
items : 10
});
});
Other examples of how to do this can be found here
I found the answer.
echo.init({
offset: 1000,
throttle: 250,
unload: false
});
we can use the offset parameter of the echo js to target the the images off the viewport.
I am using the cycle2 jQuery plugin in my website, it all works but I want to place the prev and next buttons alongside my thumbnails. I didn't want to do absolute positioning as I wanted it to be responsive. Is there a way of constantly aligning the next and prev to the first and last thumbnail?
Here is my code.
Thanks!
<div id="main">
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.tile.js"></script>
<div class="row">
<div class="container">
<div class="col-md-12">
<div id="slideshow-1">
<div id="cycle-1" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-1 .cycle-prev" data-cycle-next="#slideshow-1 .cycle-next" data-cycle-caption="#slideshow-1 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="tileBlind">
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
<div>
<img src="images/slider.jpg" class="img-responsive slideshow-img">
</div>
</div>
</div>
<div id="slideshow-2">
<div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-2 .cycle-prev" data-cycle-next="#slideshow-2 .cycle-next" data-cycle-caption="#slideshow-2 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="carousel" data-cycle-carousel-visible="5" data-cycle-carousel-fluid=true data-allow-wrap="true">
« prev
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
<div>
<img src="images/robin-thumb.jpg" width=100 height=100>
</div>
next »
</div> <!-- end of cycle 2 -->
</div> <!-- end of slideshow 2 -->
</div> <!-- end of col md 12 -->
</div> <!-- end of container -->
</div> <!-- end of row -->
Here is how it looks at the moment
you need to add float:left and float:right to next and prev:
« prev
next »
working code here : http://jsfiddle.net/zjvka30q/3/
updated code for improved UI