I have two divs I need first div"border text-center rounded h-100 product-image" image change to the active image in the second div"item-slideshow" how to do that with jquery or javascript??
note it works only when clicking on the image how to make it slide dynamically with the active image?
document.ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
});
})
<div class="col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="/files/developmentandsoftware-01.svg">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2" src="/files/developmentandsoftware-01.svg" alt="None">
<img class="item-slideshow-image mt-2 active" src="/files/AutomatetoSurvive-01.svg" alt="None">
<img class="item-slideshow-image mt-2" src="/files/completeSoultions-01.svg" alt="None">
</div>
</div>
</div>
I used your jQuery code inside slideDynamic() function and some modification + add logic by automatically click with set time interval of 3500 microseconds.
I hope below snippet will help you lot.
$(document).ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
slideDynamic(e);
});
setInterval(function(){
var totalSlide = $('.item-slideshow-image').length-1;
var getActiveInded = $('.item-slideshow-image.active').index();
if (totalSlide==getActiveInded) {
$('.item-slideshow-image').removeClass('active');
$('.item-slideshow-image:nth-child(1)').addClass('active').trigger('click');
}
else{
$('.item-slideshow-image.active').next().trigger('click');
}
},3500);
});
function slideDynamic(e){
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
}
.item-slideshow-image{
width: 60px;
margin-right: 5px;
}
.item-slideshow-image.active{
outline: 4px solid green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container page_content">
<div class="row">
<div class="col-sm-6 col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2 active" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Slide2" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/000000/FFFFFF/?text=Slide3" alt="None">
</div>
</div>
</div>
</div>
</div>
Related
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>
I have 2 input fields 1 for image and 1 for video.
I want to add more fields when +Add More button is pressed.
Here is the code
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>
$("body").on("click",".add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
How can i get the desired result. Please help
your issue is about wrong CSS selector :
$("body").on("click",".add-more",function(){
should be :
$("body").on("click","#add-more",function(){
ALSO your codes will correctly adds your desired element, but the element contents is nothing so you cannot view it .
you can get some style to the element for view it :
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
check it in the snippet :
$("body").on("click","#add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
div{
background : green;
}
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>
I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2 posts per click with ajax now I want to append next 2 posts on the bootstrap carousel and so on like this
here's my blade code where I'm using foreach to show 2 posts when pages load for example I'm showing post 1 and 2 here
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
#foreach($magazine->chunk(2) as $magazines)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
#foreach($magazines as $row)
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">{{$row->title}}</h4>
{{($row->magazine_des) ? $row->magazine_des: ''}}
<div>{{__('Read More')}}</div>
</div>
</div>
#endforeach
</div>
#endforeach
</div>
</div>
now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel
$('#nextclick').on('click',function(){
var val = $('#hidden').val();
var data = {val:val}
$.ajax({
url: "{{url('/user/nextmagazine')}}",
method: 'get',
data: data,
success: function(data){
$('#hidden').val(parseInt(val) + parseInt(2));
}
})
})
here's my result after onclick
if anyone can help me with how I can append this data in the ajax success function to show on the bootstrap carousel
Thank you
You can loop through your jsons return from backend and append that inside some variable using += .Finally , add generated html inside your carousel using $(html).insertAfter('#carousela .carousel-item:last') this will insert new slide after last slide .
Demo Code :
$(document).ready(function() {
$("#carousela").carousel();
//using `one` just for demo change it to `on`
$('#nextclick').one('click', function() {
/* var val = $('#hidden').val();
success: function(data){
//your other codes..
$('#hidden').val(parseInt(val) + parseInt(2));*/
//suppose data return look like this..
var data = [{
"id": 3,
"title": "Something3",
"magazine_sys_file_name": "somehting",
"link": null
}, {
"id": 4,
"title": "Something4",
"magazine_sys_file_name": "somehting",
"link": null
}]
if (data.length > 0) {
var html = ""
//loop
$(data).each(function(i, v) {
//generate htmls//
html += ` <div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="/uploads/${v.magazine_sys_file_name}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">${v.title}</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>`
})
//insert new html after last slide
$(html).insertAfter('#carousela .carousel-item:last')
}
/*}
})*/
})
});
#carousela{
background:black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something1</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something2</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousela" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousela" data-slide="next" id="nextclick">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
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");
})
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..