how can I make a single script for all the modal? - javascript

On the same page, I have about a dozen images and on each image at the click you open a modal. I made a script for each modal, how can I make a single script for all the modal?
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
var undici = document.getElementById('lele');
var lele = document.getElementById("img11");
function myLele(el) {
var ImgSrc = el.src;
undici.style.display = "block";
lele.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == undici) {
undici.style.display = "none";
}
}
</script>
<script>
var dieci = document.getElementById('jessy');
var jessy = document.getElementById("img10");
function myJessy(el) {
var ImgSrc = el.src;
dieci.style.display = "block";
jessy.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == dieci) {
dieci.style.display = "none";
}
}
</script>
I tried different ways, but not on multiple modals on the same page does not work.
Can I do a foreach () loop?


IDs should be unique for each element. Change the IDs of both your images from myImg to something unique like myImg1 and myImg2 respectively.
Also, you don't need to write a custom function for toggling your modals. Just use the in-build modals in Bootstrap by adding data-toggle="modal" data-target="#lele" to your modal 1 image and data-toggle="modal" data-target="#jessy" to your modal 2 image like this:
<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
You also need to add the data-dismiss attribute to your close button like this:
<span class="close" data-dismiss="modal">×</span>
Check and run the following Code Snippet for a practical exmaple of what I have described above:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
</div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
</div>

Related

innerHTML property not working with owl carousel

I am fetching data from firestore database to create a product card so that I can display the product cards inside a carousel. Owl carousel to be specific. I am using the innerHTML property in javascript to add the product cards programmatically. The Owl carousel seems to not work when I do so but when I create the cards statically in html the carousel works. What could be the problem?
Code:
Html:
<div class="product-area most-popular section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Hot Items</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel popular-slider" id="owlCarousel">
<!--product cards go here-->
</div>
</div>
</div>
</div>
</div>
Javascript:
var view2 = document.getElementById("owlCarousel");
db.collection("products").where("hot" , "==" , true)
.get().then((querySnapshot)=> {
querySnapshot.forEach((doc) => {
var image = doc.data().images[0];
var image2 = doc.data().images[1];
var title = doc.data().title;
var price = doc.data().pricing.toString();
var hot = doc.data().hot;
var discount = doc.data().discount;
var price = doc.data().pricing;
//product card creation
view2.innerHTML += `
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="${image}" alt="#">
<img class="hover-img" src="${image2}" alt="#">
<span class="out-of-stock">Hot</span>
</a>
<div class="button-head">
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
<a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
<a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
</div>
<div class="product-action-2">
<a title="Add to cart" href="#">Add to cart</a>
</div>
</div>
</div>
<div class="product-content">
<h3>${title}</h3>
<div class="product-price">
<span>Ksh. ${price}</span>
</div>
</div>
</div>
`
});
});

I just had the same problem.
What you should do is initialize the OWL CAROUSEL after you add the template (inner html);
for example:
view.innerHtml = `<div> content </div`;
$('.owl-carousel').owlCarousel({
//here you can add the props or events
})
This worked for me! hope this could hel you :)

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

Popup boxes open all at the same time

I have a bunch of pictures that when clicked, open a popup box with info about the selected picture, but all the popup boxes open at the same time.
To start, I have some
<ul class="cenas_top">
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button id="myBtn">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button id="myBtn">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
</ul>
Then, I have the boxes:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content" id="ef">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
<!-- Modal content-->
<div class="modal-content" id="fc">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Finally, this is how the script looks:
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
What's missing here?

There are several problems with your code, some of which you haven't mentioned in the question but are obvious anyway:
1) All your modal content is within one div called "myModal". When the button is clicked, you make this div visible. Therefore, all the content within it will become visible. You need to only open the modal content which is applicable to the clicked button.
2) All your buttons have the same id. This is invalid HTML. Element IDs must be unique. As it stands, only your first button will ever respond to the click event. The others will be ignored because they are considered invalid elements.
3) You're only adding the close event to the first span. So again this won't work for any of the others.
Here's an example that works. Note the match-up between the data-content attribute of each button, and the id of the corresponding modal.
HTML
<ul class="cenas_top">
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button class="modal-button" data-content="ef">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button class="modal-button" data-content="fc">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
</ul>
<!-- The Modals -->
<div id="modal-ef" class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
<div id="modal-fc" class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
JavaScript
var showModal = function() {
var modalID = this.getAttribute("data-content");
var modal = document.getElementById('modal-' + modalID);
modal.style.display = "block";
};
var hideModal = function() {
this.parentElement.parentElement.parentElement.style.display = "none";
}
//event listeners to show the modals
var buttons = document.getElementsByClassName("modal-button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', showModal, false);
}
//event listeners to close the modals
var spans = document.getElementsByClassName("close");
for (var i = 0; i < spans.length; i++) {
spans[i].addEventListener('click', hideModal, false);
}

Add next and previous button to Lightbox

I am displaying some images on my picture gallery page.
On this page I am using a jquery lightbox to display images.
The lightbox is working fine,but it doesn't have next and previous buttons .
How can I add the next and previous buttons on those pages.
There are number of pages having the lightbox so I don't want a major change.
Can anyone suggest me how can I add next and previous buttons with little changes ?
Here is my aspx page code :
<div class="row">
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="9.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="10.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="11.jpg" alt="..." class="styleforimg"/>
</a>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="<%= ResolveUrl("~") %>Images/logo.png" alt="" />
</div>
</div>
</div>
</div>
Here is the javascript file code:
$(document).ready(function () {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function (event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({ 'width': $img.width() });
$lightbox.find('.close').removeClass('hidden');
});
});

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