jQuery custom plugin changes applied to all instances - javascript

I have created this JavaScript function it works if I use it for 1 gallery but if I use it for 2 it changes the gallery in the first one, I know I'm close but can't quite seam to figure out this last bit, do I need to use .each function?
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
$('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
$('.big-photo img').attr('src', path);
});
return this
}
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>


You can make use of the container class. As the main container have a class, inside the event handler, get this element and use this to get the other elements associated(are children of this container) with this instance.
So, instead of global selectors
$('.big-photo img').attr('src', path);
which will select all the matching elements on the page, use descendant selector with find().
container.find('.big-photo img').attr('src', path)
Code:
$('.photo-thumbnails .thumbnail').click(function () {
// Get the main container of the gallery
var container = $(this).closest('.gallery-photos');
// Use that container to get elements inside it
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', path);
});
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
var container = $(this).closest('.gallery-photos');
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
container.find('.big-photo img').attr('src', path);
});
return this;
};
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
Suggestion:
$('.photo-thumbnails .thumbnail').click(function () {
// Cache this instance
var $this = $(this);
// Get the main container of the gallery
var container = $this.closest('.gallery-photos');
// Select only the thumbnail elements having current class
container.find('.photo-thumbnails .thumbnail.current').removeClass('current');
$this.addClass('current');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', $this.find('img').attr('src'));
});

Related

JS multiple class same function

I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.
How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.
Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(".box-image .image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>

Use DOM navigation relative to this to find the related image.
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>

How can I display the thumbnail image and open modal on click using JavaScript

I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?

Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>

Making multiple image carousels in same page independent

I found these carousels (after trying half a dozen similar carousels which broke down when placed in bootstrap modals) …originally the custom js function was attached to IDs and I changed that to class names to get the other carousels to show up.
The problem now is that the carousels are not independent, clicking on thumbnails changes the main image across all carousels; furthermore, the .synced class which differentiates the active thumbnail works only for the first carousel.
Is there a way to make them independent without adding IDs to the JS? I'm adding the content with PHP; I think I can only add IDs to the HTML (the modals already pull a unique ID for each gallery from the posts)
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

set secondary and primary variables when thumbnails and arrows clicked,
var secondary= $(el).siblings('.thumbnails-wrapper');
var primary= $(this).parents('.component').find('.owl-carousel');
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
var secondary= $(el).siblings('.thumbnails-wrapper');
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
var primary= $(this).parents('.component').find('.owl-carousel');
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

stacking images vertically with javascript when screen size is less than 500px

I am trying to stack images two on top of two when the screen size is less than 500px (for example) using javascript. Each of these images can have an href link but won't always.
This is some example html when greater than 500px:
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
I'm having trouble figuring out the best way to do this. Ultimately I'd like to have something like this when the screen size is less than 500px:
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<div id="one">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div><div id="two">
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
</div>
Here's an example so far, although images are missing:
http://plnkr.co/edit/obLQorTFEsI467AHJspm?p=preview
Looking for any help or advice that will help me achieve this.

Have you tried doing it with CSS media queries?
#media (max-width: 500px) {
#topbanners1-4-a img {
width: 50%;
}
}

You can use javascript and its matchMedia and alter inline styles, though it is recommended to use classes and external CSS rules.
Stack snippet
function watchMedia(wM) {
if (wM.matches) { // If media query matches
document.querySelector('#topbanners1-4-a').style.whiteSpace = "normal";
var imgs = document.querySelectorAll('#topbanners1-4-a img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width = "calc(50% - 10px)";
imgs[i].style.marginBottom = "10px";
if (i % 2 == 1)
imgs[i].style.marginLeft = "10px";
}
} else {
document.querySelector('#topbanners1-4-a').style.whiteSpace = "nowrap";
var imgs = document.querySelectorAll('#topbanners1-4-a img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width = "25%";
imgs[i].style.marginBottom = "0";
if (i % 2 == 1)
imgs[i].style.marginLeft = "0";
}
}
}
var wM = window.matchMedia("(max-width: 700px)")
watchMedia(wM) // Call once at page load
wM.addListener(watchMedia) // Listen for state changes
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<img id="front-end-top" src="http://placehold.it/300/f00" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="http://placehold.it/300/0f0" style="width: 25%; margin-bottom: 10px" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="http://placehold.it/300/00f" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="http://placehold.it/300/f0f" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
Or CSS media query and external CSS rules
#topbanners1-4-a {
display: inline-block;
white-space: nowrap;
}
#topbanners1-4-a img {
width: calc(25% - 5px);
}
#media screen and (max-width: 700px) {
#topbanners1-4-a {
white-space: normal;
}
#topbanners1-4-a img {
width: calc(50% - 10px);
margin-bottom: 10px;
}
#topbanners1-4-a > *:nth-child(even) {
margin-left: 10px;
}
}
<div id="topbanners1-4-a">
<img id="front-end-top" src="http://placehold.it/300/f00" alt="" />
<img id="front-end-top" src="http://placehold.it/300/0f0" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="http://placehold.it/300/00f" alt="" />
</a>
<img id="front-end-top" src="http://placehold.it/300/f0f" alt="" />
</div>

jQuery featured content slider

I have a content area that loops through divs and shows there content.
I'm having trouble making it display the initial content, unfortunately it waits 5000 milliseconds before triggering the very first content area to display.
Anyone spot an easy way to make it display the initial area, then slide to the next area and do them at 5000 milliseconds.
JS
Model.FeatureBar = {
current:0,
items:{},
init: function init(options){
var me = this;
me.triggers = []
me.slides = []
this.container = jQuery('#features');
jQuery('.feature').each(function(i){
me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')}
me.slides[i] = {image: jQuery(this).children('.feature-image')}
});
for(var i in this.slides){
this.slides[i].image.hide();
this.triggers[i].description.hide();
}
setInterval(function(){Model.FeatureBar.next()},5000);
},
next: function next(){
var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0;
this.goToItem(i);
},
previous: function previous(){
var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length;
this.goToItem(i);
},
goToItem: function goToItem(i){
if(!this.slides[i])
throw 'Slide out of range';
this.triggers[this.current].description.slideUp();
this.triggers[i].description.slideDown();
this.slides[this.current].image.hide();
this.slides[i].image.show();
this.current = i;
},
}
html
<div id="features">
<div class="feature current">
<div class="movie-cover">
<img title="" alt="" src="/design/images/four-oh-four.png">
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title">Police</h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 50.8604px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<img title="" alt="" src="/design/images/four-oh-four.png">
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title">Rude</h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 18.3475px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<img title="" alt="" src="/design/images/four-oh-four.png">
</div>
<div class="feature-image" style="display: block;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title">Brits</h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 40.1549px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<img title="" alt="" src="/design/images/four-oh-four.png">
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title">Indie</h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 42.4247px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>

In your init function when setting the interval, just call it once immediately as well, like this:
setInterval(function(){Model.FeatureBar.next()},5000);
Model.FeatureBar.next();
Also, if you're calling a function without any parameters, you can pass just the function, no need for an anonymous method wrapping it, like this:
setInterval(Model.FeatureBar.next,5000);
Model.FeatureBar.next();

Categories