Add custom arrows to the slider - javascript

I have ms2Gallery on MODX website. And I want to add some functionality (add left and right buttons).
<div class="large-12 medium-12 columns main_page_preview text-center">
<div class="main_page_title large-8 medium-8 large-offset-2 medium-offset-2 columns">
<h1>NAME</h1>
</div>
<div id="msGallery">
<div class="large-12 medium-12 columns" style="max-height: 845px; overflow: hidden; margin-bottom: 15px;" href="/assets/images/resources/33/banya-10.jpg">
<img src="/assets/images/resources/33/banya-10.jpg" width="100%" alt="" title="" id="mainImage">
</div>
<div class="clearfix"></div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-01.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-01.jpg">
<img src="/assets/images/resources/33/360x270/banya-01.jpg" alt="" title="banya_01.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-04.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-04.jpg">
<img src="/assets/images/resources/33/360x270/banya-04.jpg" alt="" title="banya_04.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-06.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-06.jpg">
<img src="/assets/images/resources/33/360x270/banya-06.jpg" alt="" title="banya_06.jpg" width="100%" data-id="">
</a>
</div>
<img src="build/img/prev-left.png" class="left-arrow-gallery" id="leftarrow">
<img src="build/img/next-right.png" class="right-arrrow-gallery" id="rightarrow">
</div>
To solve this problem I created this js-code:
var clicks= 0;
$('#rightarrow').on('click', function(){
clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
But I want to decrease elements on the left click, no matter how many times I clicked on right arrow.


var clicks = 0;
var leftClicks = 0;
var _ElementCount = $(".thumbnail").length;
$('#rightarrow').on('click', function(){
clicks = _ElementCount ? clicks = 0 : clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks = 0 ? clicks = _ElementCount : clicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})

Related

Remove Parent element child elements href has no property

I was trying to remove the parent element if the child element href has no attribute.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").filter(function() {
if ($(this).attr('href').length == 0) {
console.log('test');
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
when I trying to filter. got an error
$(...).filter is not a function
how to solve this error?

You can use each instead of filter.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").each(function(i, e) {
if ($(e).attr('href').length == 0) {
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Is there a way to hover one element and to style many others with pure css/js?

I have tried giving id to the element which I want to style when I hover over a div. And I have given the div an "onmouseover" attribute with the value of a function which changes the style of the element, but it changes it permanently and even when my mouse isn't on the element
<div class= "container">
<div class="row">
<div class="item1 col-sm-3" ">
<a href="#">
<img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
<div class="item2 col-sm-3" onmouseover="hoverStyle()">
<a href="#" >
<img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
var hoverElements = document.getElementsByClassName('picture');
function hoverStyle() {
document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}

Add an onmouseout event:
<div class= "container">
<div class="row">
<div class="item1 col-sm-3" ">
<a href="#">
<img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
<div class="item2 col-sm-3" onmouseover="hoverStyle()" onmouseout="unhoverStyle()">
<a href="#" >
<img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
var hoverElements = document.getElementsByClassName('picture');
function hoverStyle() {
document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}
var hoverElements = document.getElementsByClassName('picture');
function unhoverStyle() {
document.getElementById("picture1").style.filter = "";
document.getElementById("picture2").style.filter = "";
}

Simulate button click with delay

I have a function that switches between 3 divs when one of 3 buttons is clicked (each button is linked to each div). But I also need that function to click each button automatically with 4 seconds delay. I want to achieve something like a slider that switches between those 3 divs automatically but the divs can also be switched by buttons. Is it possible to do? If so, how to do that? I'm a total jQuery / javascript beginner and I have no idea how to make it work.
Code attached below.
$(document).ready(function() {
$('#button_slide1').trigger('click');
$('.btn a').on('click', function(e) {
e.preventDefault();
//figure out which slide to show
var slideToShow = $(this).attr('rel');
//hide current slide
$('#header .slides.active').removeClass('active')
$('#' + slideToShow).addClass('active');
//show new slide
});
});
.slides:not(.active) {
display: none;
}
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

This should get you well along your way.
<style>
.toggleDiv {
display: none;
}
.toggleDiv.active {
display: block;
}
</style>
<div id="div1" class="toggleDiv">
<span>I'm div #1</span>
</div>
<div id="div2" class="toggleDiv">
<span>I'm div #2</span>
</div>
<div id="div3" class="toggleDiv">
<span>I'm div #3</span>
</div>
<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>
<script>
var slides = [
document.getElementById("div1"),
document.getElementById("div2"),
document.getElementById("div3")
];
function Slides(slides, active) {
this.slides = slides;
this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
this.slidesCount = this.slides.length;
this.toggle = function(index) {
if (this.activeIndex === index) {
return this.close(index);
}
return this.open(index);
};
this.open = function(index) {
this.activeIndex = index;
let i;
for (i = 0; i < this.slidesCount; i++) {
if (this.activeIndex !== i) {
this.slides[i].classList.remove("active");
}
}
return this.slides[index].classList.add("active");
};
this.close = function(index) {
this.activeIndex = null;
return this.slides[index].classList.remove("active");
};
console.log(this.activeIndex)
if (this.activeIndex !== null) {
this.slides[this.activeIndex].classList.add("active");
}
}
var slides = new Slides(slides, 0);
</script>

You need to set an interval using javascript:
var inx=0, // the button index that must be clicked
totalButtons = $('.buttons-wrapper').find('div.btn').length; // total number of buttons
var myInterval = setInterval(clickButton, 4000); // name of the function that needs to be triggered, time interval in miliseconds
function clickButton() {
if (inx >= totalButtons) // check for out of index
inx = 0;
$('.buttons-wrapper').find('.btn').eq(inx).find('a').first().trigger('click');
inx=inx+1; // adding one unit to the index
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
You can edit this example according to your need
$(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
$('.btn').one("click", function(e) {
e.preventDefault();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
});
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div id="slideshow">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" >
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

Dynamically add elements from top and remove same number of elements from bottom

Here I have made function for adding n number of div and at a same time n number of divs are removed.But in my code i append div from bottom and remove div from top.I just want to reverse from it.Divs should be added at top and removed from bottom.
Fiddle: https://jsfiddle.net/xddn8x04/3/
<div class="visible-md visible-lg sidebar">
<div class="follow-box" data-spy="affix" data-offset-top="200">
<!-- <div>You may follow</div> -->
<div class="follow-container">
<div class="follow_title">People you may follow</div>
<div class="set-follow">
<div class="follow">
<div class="sidebar-img">
<div class="img-block">
<img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60">
</div>
</div>
<div class="center-block">
<div class="name">Malica Ross</div>
</div>
</div>
<div class="follow">
<div class="sidebar-img">
<div class="img-block">
<img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60">
</div>
</div>
<div class="center-block">
<div class="name">Ajmal Bilal</div>
</div>
</div>
<div class="follow">
<div class="sidebar-img">
<div class="img-block">
<img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60">
</div>
</div>
<div class="center-block">
<div class="name">Shung ching</div>
</div>
</div>
<div class="follow">
<div class="sidebar-img">
<div class="img-block">
<img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60">
</div>
</div>
<div class="center-block">
<div class="name">Shrew mykong</div>
</div>
</div>
<div class="follow">
<div class="sidebar-img">
<div class="img-block">
<img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60">
</div>
</div>
<div class="center-block">
<div class="name">Fenny Sharma</div>
</div>
</div>
</div>
<div class="hide-follow"></div>
</div>
<div class="follow-suggestions"></div>
</div>
</div>
var followContainer = function() {
var countdown;
var count = 0;
var _addContent = function(count) {
var followlen = +$('.follow-container .set-follow > .follow').length;
var _followcontent = ('.follow-suggestions .follow-container');
var follow = '';
for (var i = 0; i < count; i++) {
follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
$(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
'1000');
$('.follow-container .set-follow').append(
$(".follow-container .hide-follow >.follow"));
$(".follow-container .set-follow >.follow:visible:lt(" + count + ")").fadeOut(
'1000');
}
}
var _events = function() {
var timeoutHandle = window.setTimeout(function() {
_addContent(1)
}, 5000);
setTimeout(function() {
_addContent(2)
}, 8000);
}
var _init = function() {
_events();
}
return {
init : _init
}
}();
$(document).ready(function() {
followContainer.init();
});

Use
$('.someParentClass')('.someClass').slice(-5).remove();
to remove last 5 divs of class someClass inside some someParentClass', and if$abc` is the html you want to add on the top use
$(".someParentClass").prepend($abc) or
$(".someParentClass").html($abc+$(".someParentClass").html())

Adding descriptions inside a blueimp gallery

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.
I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.
Here's what I have so far;
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<div class="row prints">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
<img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
</a>
<h3>Ballooning</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
<img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
</a>
<h3>Clearing</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
<img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
</a>
<h3>Sky/Sea</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
<img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
</a>
<h3>Lights</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
<img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
</a>
<h3>Silhouettes</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
<img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
</a>
<h3>Sway</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
<img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
</a>
<h3>Sunset</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
<img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
</a>
<h3>Lighthouse</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
<img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
</a>
<h3>Slabs</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.blueimp-gallery > .description {
position: absolute;
top: 30px;
left: 15px;
color: red;
display: none;
}
.blueimp-gallery-controls > .description {
display: block;
}
JS:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
And in my body (gallery.js is the file where I've added the above JS):
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/fancybox/jquery.fancybox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script src="js/gallery.js"></script>
Any pointers on where I've gone wrong would be much appreciated!

You can pass any needed data on a element, and then display it in the gallery.
I spend a lot of time trying to find an answer, so I'll leave it here.
Here is an example:
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<p class="example"></p>
...
</div>
------
<div id="links">
Banana
Apple
</div>
JS:
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
CSS:
You can use .scss to refactor it, but it's just for example
.blueimp-gallery > .description, .blueimp-gallery > .example {
position: absolute;
top: 30px;
left: 15px;
color: #fff;
display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
display: block;
}

Sorry if to late but I find a way to do this, only change the JS from:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
to this:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].innerHTML = text;
}
}
}
);

blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/25/
Have a look at this one, it is a working one.
Just check what you've done wrong compared to mine.

use
document.getElementById('links').getElementsByTagName('a') or .children()

That works only for the first link...
I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?
http://jsfiddle.net/LXp76/
<img src="http://lorempixel.com/80/80/" alt="" >
here it is working with FancyBox, http://jsfiddle.net/yShjB/2/
but I would much rather use the BlueImp Gallery..

Categories