For some reason, pagination with a fraction is not displayed immediately, but only when the slider turns to the next slide or if you do it yourself. What is the reason?
Site http://ilyin1ib.beget.tech/
Code https://jsfiddle.net/ve4oaq1L/
$('.spaces-gal').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + '/' + carousel.items().length);
}).owlCarousel({
items: 1,
loop:true,
margin:0,
nav:true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spaces-gal owl-carousel">
<div class="spaces-slide one">
<h4>Private Space</h4>
<p>Comfortable space, Full speed wifi, Free coffe & Snack<br>and many more</p>
<div class="details">
<span>Check avaibility</span><i class='fas fa-chevron-right'></i>
</div>
</div>
<div class="spaces-slide two">
<img src="img/space-2.jpg" alt="2">
<span>Custom Office</span>
<div class="details">
<span>Check avaibility</span><i class='fas fa-chevron-right'></i>
</div>
</div>
<div class="spaces-slide three">
<img src="img/space-3.jpg" alt="3">
<div class="details">
<span>Check avaibility</span><i class='fas fa-chevron-right'></i>
</div>
<span>Problem solving</span>
</div>
<div class="spaces-slide four">
<img src="img/space-4.jpg" alt="4">
<div class="details">
<span>Check avaibility</span><i class='fas fa-chevron-right'></i>
</div>
<span>Working with team</span>
</div>
</div>
Related
I'm using W3SCHOOL bootstrap.
The codes below are display an image and if you click that image, it shows original size image (pop-up?).
Now, I'm trying to convert it for 'n' images using for loop. (*var selectedMarkerIndex is m'th image out of n)
I found examples : display images or s dynamically in javascript, however I can not come up with "how can I add that amount of large lines(div class, id, span, and so on)?".
<div class="w3-row-padding">
<div class="w3-half w3-container w3-margin-bottom">
<div class="w3-container w3-white" id="ImageRGBDiv">
<p><b>RGB Image</b></p>
<img id="ImageRGB" onclick="document.getElementById('modalRGB').style.display='block'">
<div class="w3-modal-content w3-animate-zoom">
</div>
</div>
<div id="modalRGB" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img src="" style="width:100%" id="ImageRGBOriginal">
<script type="text/javascript">
document.getElementById("ImageRGBOriginal").src = "Data/RGB/image" + selectedMarkerIndex + ".jpg";
</script>
</div>
</div>
</div>
</div>
Your question is not clear to me. but you can try like this
<div id="image">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
var selectedMarkerIndex = $('#selectedMarkerIndex').val();
for (var i = 0; i <=5; i++)
{
var template = `<div class="w3-row-padding">
<div class="w3-half w3-container w3-margin-bottom">
<div class="w3-container w3-white" id="ImageRGBDiv">
<p><b>RGB Image</b></p>
<img id="ImageRGB" onclick="document.getElementById('`+i+`').style.display='block'">
<div class="w3-modal-content w3-animate-zoom">
</div>
</div>
<div id="`+i+`" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img src="Data/RGB/image/`+ selectedMarkerIndex +`" style="width:100%" id="ImageRGBOriginal">
</div>
</div>
</div>
</div>`
$('#image').append(template)
}
}
</script>
I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)
You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>
I want to only display the next container once the previous container's child has been selected.
<section class="section-blue" id="question1">
<div class="container">
<h1 class="question-heading">Q1: WHO ARE YOU MOST LIKE?</h1>
<div class="row">
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/1.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">THOMAS EDISON</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/2.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">ALBERT EINSTEIN</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/3.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">NELSON MANDELA</p>
</a>
</div>
</div>
</div>
</section>
<section class="section-red" id="question2">
<div class="container">
<h1 class="question-heading">Q2: WHAT’S YOUR PREFERENCE?</h1>
<div class="row center-block">
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/4.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">CHESS</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/5.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">FOOTY</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/6.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">LEGO</p>
</a>
</div>
</div>
</div>
</section>
So question #1 should be displayed when you first open the webpage, then once you have clicked one of the pictures, it takes you to question #2. question #2 would be hidden until question #1's child has been clicked.
Have a look at my codepen here
A good example of what I am trying to achieve can be found here
https://www.randstad.co.uk/ugc/found/tech-entrepreneur-match/
I've put together a codepen which does what you'd like.
It works as follows:
Hide all sections at first with CSS
Number the sections based on their order in the dom
Show the first section
Bind a handler for each answer click to take the index of the parent section and show the next section based on that (as well as highlighting)
I added a couple of CSS classes (section, section.highlight and answer) but here's the essence:
$(() => {
init();
});
function init() {
numberSections();
bindAnswerClick();
showSection(0);
}
function numberSections() {
$(".section").each((index, elem) => {
$(elem).data("index", index);
$(elem).attr("data-index", index);
});
}
function bindAnswerClick() {
$(".answer").on("click", (e) => {
selectAnswer($(e.currentTarget));
});
}
function selectAnswer($answer) {
let $section = $answer.closest(".section");
let nextIndex = parseInt($section.data("index")) + 1;
$section.find(".answer").removeClass("highlight");
$answer.addClass("highlight");
showSection(nextIndex);
}
function showSection(index) {
$(".section[data-index='" + index + "']").show();
}
CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->
Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.
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..