jQuery move div based on child class character length - javascript

I have a bootstrap 4 column template in mobile I want to apply clear:both based on child div character length . I mentioned the below the sample code if not clear I will briefly text on commands. Anyone help me to achieve this.
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rustic</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabc</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
The script I was tried.
if ($(window).width() < 767) {
$(document).ready(function() {
var totLength = $('.tileh4');
var charLength = totLength.text().length;
if(charLength > 3){
totLength.addClass('whitespac');
}
$('.applyclear:has(.tileh4.whitespac)').css('clear', 'both');
});
}
else {
}
sample code here

Related

how to Put div to same Position on reload and load using jquery 1.5.2

I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->

So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});

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 = "";
}

Showing next container once previous section has been completed

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();
}

Slow performance rendering in client templating engine (Rivets.js)

I'm rendering an array of of about 1000 objects. The html bindings are very heavy (see below). It's taking about 5 seconds to rivets.bind().
Any suggestions on improving performance? I don't think I can afford to bind in chunks as I'm using a pagination/sorting library in conjuction that needs the entire array in order to sort/paginate.
Here is my HTML for each object (tracks):
<div rv-each-track="tracks" class="track-row row has-hover" rv-download-url="track.direct_path.download_path" rv-api-key="track.track.apikey" rv-media-url="track.direct_path.audio" rv-track-title="track.track.name" rv-wave-data="track.direct_path.wave_default" rv-wave-progress-data="track.direct_path.wave_progress">
<div class="mobile-margin">
<div class="track-hover desktop-only">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{track.track.name}<span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></div>
<div class="hover-links">
<div class="item hamburger holds-tooltip main-hover-item icon-hamburger" data-toggle="tooltip" data-original-title="Alternate Versions"></div>
<div class="item share main-hover-item popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist icon-playlist-add popover-button holds-tooltip main-hover-item" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist"></div>
<div class="item download icon-download holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Download Track"></div>
<div class="item cart last icon-cart-plus holds-tooltip main-hover-item popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item remove last icon-x holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Remove Track" rv-data-delete-track-id="track.track.apikey"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="track-variations">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-data-track-id="track.track.apikey" rv-api-key="variation.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name" rv-wave-data="variation.direct_path.wave_default" rv-wave-progress-data="variation.direct_path.wave_progress">
<div class="col-md-8 variation-title">{variation.track.name}</div>
<div class="col-md-2 variation-length">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title"><a class="track-link">{variation.track.name}</a></div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" rv-data-media-url="track.direct_path.download_path" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>
</div>
<div class="col-md-4 first-title desktop-only"><a class="offset-left track-title-link track-link" href="">{track.track.name}</a><span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></span></div>
<div class="col-md-3 genre desktop-only"><span class="offset-left">{track.genre}</span></div>
<div class="col-md-2 mood desktop-only"><span class="offset-left">{track.mood}</span></div>
<div class="col-md-2 canvas desktop-only"><div class="mini-wave offset-left" rv-style-background-image="track.direct_path.wave_canvas"></div></div>
<div class="col-md-1 last-title duration desktop-only"><span>{track.track.tracklength}</span></div>
<div class="col-md-1 last-title last-played pull-right desktop-only">{track.lastPlayed}</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{track.track.name}</div><span rv-class="track.track.staff_pick | staffPickClass"></span></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
<div class="pull-right mobile-only mobile-button mobile-variations-button icon-hamburger"></div>
</div>
<div class="is-staff-pick hidden">{track.track.staff_pick | staffPickValue}</div>
<div class="instrument hidden">{track.instrument}</div>
<div class="industry hidden">{track.industry}</div>
<div class="tempo hidden">{track.tempo}</div>
<div class="aggregated-terms hidden">{track.tag_list} {track.track.name}</div>
<div class="date-last-played hidden">{track.dateLastPlayed}</div>
<div class="clearfix"></div>
</div>
<div class="track-variations mobile-only">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-api-key="track.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name">
<div class="mobile-margin">
<div class="col-md-8 variation-title desktop-only">{variation.track.name}</div>
<div class="col-md-2 variation-length desktop-only">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{variation.track.name}</div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{variation.track.name}</div></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
</div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>

Do not do rivets events example: rv-click which will degrade your performance because you will be passing your entire view for the callback method.
DO not pass entire view to the rivets.bind()
pass only the necessary models and do it.
If it is possible first bind 100 elements and then if user scrolled half of the page bind again 100 elements which will improve your performance for sure.
I did the below changes in binders to make it run faster even in lower end mobile devices as well.
rivets.binders.text = function(el, value) {
if (el.textContent != null) {
return el.textContent;
}
else {
return el.innerText;
}
};

I've come to the the conclusion that yes, there are minor performance improvements that I could potentially implement for binding 1000+ (large html) objects to the DOM using Rivets. However, the root issue is the fact that I'm trying to bind 1000+ rivets into the DOM at once and that is going to be inherently slow using any technique (I've tested with React, jQuery, Rivets, etc...).
The solution to this problem is to simply find another way. I've chosen to pre-render the html on the server and serve it up through an API response. This cut the page load time down from ~5s to ~1s.

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