Installed lightGallery today on my site and here is the part of code:
<div class="portfolio-content">
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link grph active" data-group="graphics">Banners</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
</li>
</ul>
<div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">
<figure class="gallery-graphics" data-src="images/bnrs/01-bnr.png" data-sub-html="<h4>Banner 1</h4>" data-groups='["graphics"]'>
<img class="img-responsive" src="images/bnrs/01-bnr.png">
</figure>
<figure class="gallery-logo" data-src="images/logo/01-logo.png" data-sub-html="<h4>Logo 1</h4>" data-groups='["logo"]'>
<img class="img-responsive" src="images/logo/01-logo.png">
</figure>
</div>
</div>
Single main container with id #portfolio_grid has 2 galleries with different selectors - 1 for banner images, 2 for logos. I want to see 2 different galleries on click showing 1/1 images each instead of 1/2, so I tried to understand lightGallery HTML markup instructions and wrote this code:
$('#portfolio_grid').lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$('#portfolio_grid').lightGallery({
hash: false,
selector: '.gallery-logo'
});
which normally works for first gallery, but doesn't work for second. I tried to wrap <figure>...</figure> in divs with unique id, but in my case it breaks the site.
After this I tried another solution relating to lightGallery's own destroy() function and wrote this code which partially works only once - I have 1/1 image in first gallery and 1/1 image in second gallery. Second click on gallery image breaks the site.
var $lg = $('#portfolio_grid');
$lg.lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$lg.on('onCloseAfter.lg', function(event) {
$lg.data('lightGallery').destroy('true');
$lg.lightGallery({
hash: false,
selector: '.gallery-logo'
});
});
How to make lightgallery work with single id and many different selectors? Please help.
Try this: (cleaning up both lightGalleries)
var $lg = $('#portfolio_grid');
$lg.lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$lg.on('onCloseAfter.lg',function(event){
$lg.data('lightGallery').destroy('true');
});
$lg.lightGallery({
hash: false,
selector: '.gallery-logo'
});
$lg.on('onCloseAfter.lg',function(event){
$lg.data('lightGallery').destroy('true');
});
Related
I know that there are some associated questions about it, I tried all solutions and read all documentation, but w/o result.
I am initializing a Owl carousel :
HTML
In HTML, I have 2 items :
<div class="owl-carousel owl-theme all_diplomas">
<div class="item diploma-0">
<div class="content_diplomas">
<a data-fancybox="gallery" href="images/6.jpg"><i
class="material-icons">search</i></a>
<figure><img src="images/6.jpg" alt=""></figure>
</div>
<button class="waves-effect delete-diploma waves-blue diploma-0" type="button"><span>x</span> </button>
</div>
<div class="item">
<div class="add_diplomas">
<div class="item_add_diplomas">
<span class="plus_add">+</span>
<span class="txt_btn">Add diploma<br></span>
<input id="generateInputsForDiplomas">
</div>
</div>
</div>
</div>
JS :
$(".all_diplomas").owlCarousel({
loop: true,
margin: 15,
responsive: {
1000: {
items: 4
},
1200: {
items: 2
}
},
});
Next, after my script initialization :
$('input#generateInputsForDiplomas').on('click',function() {
var template = '<div class="item diploma-' + index + '"> <div class="content_diplomas"> <a class="diploma-' + index + '" data-fancybox="gallery" href="images/3.jpg"><i class="material-icons">search</i></a>' +
'<figure><img src="images/3.jpg" class="addedDiplomaInput diploma-' + index + '"alt=""></figure> </div> </div>'
+ '<button class="waves-effect delete-diploma waves-blue ' + classes + '" type="button"><span>x</span> </button>';
var newEl= $('.all_diplomas').trigger('add.owl.carousel', [template, 33]).trigger('refresh.owl.carousel');
});
Code above just adds a block of owl-item with one image and some id-s
and classes.
Then, it appends this template to position 33 and refreshes the
carousel
Them, each element has a delete button associated to owl-item class
$(document).on('click', 'button.delete-diploma',function() {
$(".all_diplomas").trigger('remove.owl.carousel', 33).trigger('refresh.owl.carousel');
});
That's the thing. When adding an element, from documentation, I am setting the position for this element explicitly - like 33. But when I am calling the button that is responsable to remove item with position 33, it deletes entire slider, or sometimes unexpected behavior.
The reason why I'm calling position explicitly, because I need to know each item's index, because when calling delete button, to know item with which position to delete. Documentation offers callbacks that has this information, but not for "add" event.
How can I lifehack that problem? I want to add n-items to carousel, and each this block with image to has it's own delete button. So, when calling this button, it will delete that element and refresh the Owl. I tried with pure jQuery to delete parents and so on... but Owl generates some other classes, and because of it, item is deleted, but empty spaces in slider remains.
FIDDLE: http://jsfiddle.net/2patspw2/3429/
I am using featherlight as my modal box and am running lightslider inside of it. It runs fine the first time it is clicked, but them for some reason it seems to bug out and duplicate itself. I had thought it might be duplicate slides so I read light slider documentation and added this:
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
This didn't fix the problem, so then I tried doing an each() of function (index) like so:
$('.inline').each(function(index) {
$(document).on("click", '.modal', function() {
// relevant code
});
});
I bound it to a delegated event since I have to activate via an on:click. However the element still seems to duplicate itself?
HTML:
<a href=".inline" class="modal" data-featherlight>Inline</a>
<div class="inline">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> TEST!!!!
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
<a href=".inline-two" class="modal" data-featherlight>Inline2</a>
<div class="inline-two">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> asfasdf
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
jQuery:
$(document).each(function(index) {
$('.modal').on("click", function() {
$('.gal').lightSlider({
gallery: true,
item: 1,
loop: true,
thumbItem: 9,
slideMargin: 0,
enableDrag: false,
currentPagerPosition: 'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
}
});
})
});
Why is the carousel essentially duplicate the navigation and bugging out?
Note I tried doing loop: false as well, and it didn't change anything.
I have a question as to how I can pass my Mongo documents around my JS and HTML. I have an example below, I'm trying to have my popover display the name of the thumbnail that's being hovered over. When someone clicks on the thumbnail a modal pops up that displays the picture as well as the description of the thumbnail. The issue is that when I try to pass the this.name element to the popover, it displays the name of the first thumbnail i hover over for all of the thumbnails, but it doesnt use the information for the first thumbnail on all the modals (its actually dynamic). I want to know what I'm doing wrong, the only work around I've found is to put the {{name}} tag inside my actual html as the data-content to the thumbnail.
HTML
<template name="gallery">
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="#" class="thumbnail" data-content='{{name}}'>
<img src="{{img}}" alt="...">
<div class="caption">
<h5><center>{{name}}</center></h5>
</div>
</a>
</div>
</template>
JS
Gallerys = new Mongo.Collection("gallerys");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
gallerys: function () {
return Gallerys.find({}, {sort: {createdAt :-1}});
}
});
Template.body.events({
"mouseover a.thumbnail" :function(event, template){
$('a.thumbnail').popover({
trigger: "hover",
placement: "bottom",
})
},
"click a.thumbnail": function(event, template) {
event.preventDefault();
bootbox.dialog({
title: '<center><h2>'+ this.name.toUpperCase() +'</h2></center>',
message: '<div class="row"><div class="col-md-3"><img class="img-rounded" height="200" width="200" src="' + this.img + '"></div><div class="col-md-9"><h4>Description</h4>"'+ this.description +'"</div></div>',
size: 'large',
buttons: {
play:{
label:'PLAY SAMPLE <span class="glyphicon glyphicon-play"></span>',
className:"btn-success pull-left modalbtn"
},
download: {
label:'DOWNLOAD <span class="glyphicon glyphicon-download-alt"></span>',
className:"btn-primary modalbtn",
callback: function() {}
}
},
onEscape: function() {},
});
}
});
}
Like BraveKenny already suggested, move the helper event to the Template.gallery. It isn't an optional/cosmetic step to beautify your code. It sets the correct data context in the event helper.
Here is a boilerplate app showing the way data context work:
http://meteorpad.com/pad/hPaJ35NnWyHjkWAD3/Leaderboard
I am building a web app. I have to let a user upload a picture or drag-and-drop one into the browser. To help with this, I'm using dropzone.js. My challenge is, I need to customize the appearance a bit.
My customization requires features that seem pretty forward in dropzone.js. Basically, I need: only one file can be uploaded at once. While the file is being uploaded, I need to show a progress bar. Once uploaded, I need to let the user either a) remove the existing picture or b) replace the picture with another one. In an attempt to this, I currently have the following HTML:
<div id="myDropZone" style="cursor:pointer;">
<div class="files" id="previews">
<div id="template" class="file-row">
<ul class="list-inline">
<li>
<span class="preview" style="width:300px;"><img data-dz-thumbnail /></span>
<p class="size" data-dz-size></p>
</li>
<li style="vertical-align:top;">
<ul id="pictureActions" class="list-unstyled">
<li>
<button class="btn btn-default dz-clickable file-input-button">
<i class="glyphicon glyphicon-picture"></i>
<span>Pick...</span>
</button>
</li>
<li>
<button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;">
<i class="glyphicon glyphicon-trash pull-left"></i>
<span>Delete</span>
</button>
</li>
</ul>
</li>
</ul>
<div id="uploadProgress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress>
<span>Please wait...</span>
</div>
</div>
</div>
</div>
<div id="uploadPrompt">Drag-and-drop a picture here</div>
</div>
I am initializing this code as a dropzone using the following JavaScript:
$(function () {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var pictureDropZone = new Dropzone("div#myDropZone", {
url: "/pictures/upload",
clickable: true,
uploadMultiple: false,
autoProcessQueue: true,
previewTemplate: previewTemplate,
previewsContainer: "#previews",
init: function () {
this.on("complete", function (data) {
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
},
uploadprogress: function (e, progress) {
$('#uploadProgress').css('width', progress);
},
removedfile: function () {
$('#previews').hide();
$('#uploadPrompt').show();
}
});
});
There are several problems though. If I click the text Drag-and-drop a picture here, the file picker does not open. If I click outside of the text, the file picker opens. Also, this code works for the initial process of choosing a file. However, if I click the "Pick..." button, the page does a post back. In reality, I was expecting the file picker to appear again. If I click the "Delete" button, and then choose a file again from the file picker, the picture, upload progress and action buttons never appear.
I feel like I'm screwing up the initialization of the dropzone somehow. What am I doing wrong? Why can't I choose another picture or delete a picture and choose another one or open the file picker if I click the prompt text?
I have changed your code
this.on("complete", function (data) {
$("#previews").show(); //This line added ... and it's worked...
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
i think then line: $('#previews').hide(); you have hidden preview element, and this not change status when you append new image. :).
And this word but, You can see old picture you added, I think it's a new bug... I trying solute it... Have you idea for it.
http://jsfiddle.net/qek0xw1x/15/
i'm working on a site which uses jquery v1.6.2. i want to show a cluetip using local content for all anchors of a given class. however the localcontent in the cluetip is only showing up for the first two anchors of this class. i have simplified the problem down to the following code: (jsfiddle here)
$(function() {
$('a.triggerxxx').cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 1</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 2</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 3</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 4</a>
<div class="cluetip-contentxxx">this content should show in all cluetips, but it only shows up in the first two</div>
is cluetip not meant to work this way, or am i doing something wrong?
Try this
$(function() {
$('a.triggerxxx').each(function(index) {
$(this).cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
});