Got an annoying bug i can't fix.
I append a div and put the slider markup inside
$(article_box).append('[MARKUP]');
$('#screenshot-carousel').carouFredSel({
responsive: true,
// scroll: { fx: "crossfade", duration: "1500" },
items: {
width: 580
},
auto: false,
prev : {
button : ".event .prevPhoto",
key : "left"
},
next : {
button : ".event .nextPhoto",
key : "right"
}
});
Here markup is:
<div class="photo-block" id="'+id+'">
<i class="icon-red icon-in-nav icon-remove"></i>
<div class="controls">
<p class="slides-counter"><span id="the_num">0</span> из <span id="out_of">0</span></p>
</div>
<ul id="screenshot-carousel" class="fixclear">
<li><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
<li id="additional"><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
</ul>
</div>
What i get: the code inserts the markup, and i can see it in browser code viewer (images are there and i can open them in separate tab), but i can't see images in slider. Slider doesn't show slides, actually. All i see is control buttons. There is no bug shown in console , so the code seems to be clear, but what's wrong with showing slides/images?
Related
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');
});
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 gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.
I currently have one bigSlide menu happily working on my page and are looking to incorporate another. The documentation does not make it clear at to whether this is possible. I've tried a few things to no avail. Has anybody had any success with having two bigSlide menus on the one page?
jQuery code used for the first menu is shown below:
$(document).ready(function() {
$('.menu-link').bigSlide({
menu: ('#menu'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
});
With the associated HTML being:
<nav id='menu' class='panel' role='navigation'>
<span>
// stuff for the menu
</span>
</nav>
<div class='wrap'>
</div>
You already have all of the components in your question to make this solution work.
First, add a 2nd anchor tag as per below, and change the href and class to something unique, this lets you target these specifically when they're clicked on.
<div class='wrap'>
</div>
Once done, you can then modify your script to the following; being sure to modify your class and menu as per your 2nd anchor tag above.
$(document).ready(function() {
$('.menu-link').bigSlide({
menu: ('#menu'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
$('.menu-link2').bigSlide({
menu: ('#menu2'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
});
EDIT: In my haste i forgot some of your form elements. Here you would create the 2nd menu alongside your first, ensuring you reference the right ID.
<nav id='menu' class='panel' role='navigation'>
<span>
// stuff for the menu
</span>
</nav>
<nav id='menu2' class='panel' role='navigation'>
<span>
// stuff for the second menu
</span>
</nav>
It will just not display for some reason, the one I have in the regular(non-modal) page works wonders, but this one does not. I googled and found, that I have to trigger the flexsslider initialisation, when modal opens, so I did.
$(document).ready(function(){
$('#modal').on('shown.bs.modal', function() {
console.log('Init flex.....');
$('#carousel-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
});
Thats the JS part
<div class="container">
<div class="flexslider" id="slider-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'med')?>"/>
</li>
<? } ?>
</ul>
</div>
<div class="flexslider" id="carousel-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'sml')?>"/>
</li>
<? } ?>
</ul>
</div>
</div>
And thats the Part in modal.
The console.log part triggers, when I open the modal, but rest won't :/ I have googled and messed for hours now, maybe someone can point me in the right direction?
For some reason, when I put the initialisation script into the modal body with a small delay(I used 500 ms), it mysteriously started working
You shouldn't initialise flexslider only when modal is shown. Supposably if you show and hide it several times, the slider would be initialised at each.
I would let the flexslider initialisation on document ready. The modal 'show' will only make it visible.