cbopp-art / lightcase Goto Github PK
View Code? Open in Web Editor NEWThe smart and flexible Lightbox Plugin.
Home Page: https://cornel.bopp-art.com/lightcase/
License: Other
The smart and flexible Lightbox Plugin.
Home Page: https://cornel.bopp-art.com/lightcase/
License: Other
Is there a way (not in mobile mode) to make an iframe fullscreen not just in mobile.
Preferably it would be responsive as well.. (ie if window < 800px enable fullscreen iframe)
I can do this by overriding the styles but I though there might already be a method.
thanks in advance..
Is it possible to somehow implement lazy load functionality for inline
type, or any other type of content displayed within lightbox ? Thanks in advance
I am doing some research on lightboxes vs building my own for a project. What I will be doing, is using a API to request data which will be dynamically adding HTML to the page for example to a container element. I am just wondering once I have init your plugin on that container element will additional elements be picked up once added to the div container or will I have to reinit the plugin to pick up the added elements.
Thanks in advance.
Hi,
On the documentation, in your website, they are a little missing character, ^
after data-rel
In Mobile => Swipe it's not
$('a[data-rel=lightcase]').lightcase({
swipe: true
});
But :
$('a[data-rel^=lightcase]').lightcase({
swipe: true
})
require('lightcase') fails with "Error: Cannot find module 'lightcase'".
Changing main path to "./src/js/lightcase.js" fixed this for me
the picture box gets bigger every time next/prev has been hit, step by step. until about 5 times it fills out the whole mobile screen.
live on http://absolutely-d.com
Hello, Cornel!
While testing Lightcase on a mobile device, I stumbled upon this thing: in cases when an image fills the full screen (depends on aspect ratio), the caption falls outside and cannot be read.
Maybe this is not an issue, and I just need to change something in the settings?
Cheers!
To reproduce bug please go to this website:
http://www.stogda.pl/offer/shipbuilding/
and click on last tab called 'references'. Then scroll down and click on 'view' button under 'References List'.
Strange thing cause all other instances with images are working great. Problem exists only with android devices. Iframe scrolls smooth on desktops nad iOS devices.
By the way it's amazing plugin. Great work.
I use isotope plugin and I need to update lightcase when I filter some images by isotope (use lightcase collection that image still show only). Can lightcase handle this?
Isotope: http://isotope.metafizzy.co/
Thanks.
Again with a question not an issue.. (this is a solid product)
So I am working in an environment that uses iframes. Is there a way for me to call the parent.lightcase function from within an iframe?
This will allow the #lightcase-overlay to cover the entire page, not just the iframe.
thanks in advance.
Hi there.
First of all, thanks for this plugin. It's beautiful and easy to use.
My problem with it is, as an absolute noob I am, that I can make it work but I cannot get any of the effects from your 'examples of use' gallery working. When I click on the element, it opens the image, but no close button, no spinner on loading, no fade in effect... Just a plain dark background and the image, that's all.
Can you think of something I'm doing wrong? Something else that should be added to my code?
Thanks!
I'm using Lightcase inside a Slick carousel and the lightbox opens on mouseup after the carousel has been dragged. I'd like to prevent this behavior and only have the lightbox open when a pure click event is performed, not a drag-click.
The first method that comes to mind is to set a global dragging = true/false
flag that gets updated when the carousel moves, then handle the lightbox clicks accordingly.
Is there any way to prevent the lightbox from opening in Javascript?
Hi there,
Awesome Lightbox plugin! Is it possible to add a setting option in which you can turn off the automatic sliding after clicking on an image?
I think it would be rather easy to implement this functionality, by adding the following setting:
autoSlideshow: true
And adding an extra option to the the following if-statement:
// Only start the timeout if slideshow is not pausing and the autoSlideshow setting is true
if (!_self.objects.nav.hasClass(_self.settings.classPrefix + 'paused') && _self.settings.autoSlideshow) {
Another small remark, your demo-page on http://cornel.bopp-art.com/lightcase/#demo returns an error in the original version of Internet Explorer 9, 10 and 11 (and maybe more).
Thanks in advance!
hi
thanks for your work
could you please add a resize method so we can force a resize after the content changes ?
i have a iframe that changes content starts with a lot and then remains only a message and it looks bad
<a class="myopener" data-mydata="mydata">open lightcase modal</a>
<a class="myopener" data-mydata="myotherdata">open other lightcase modal</a>
.....
$('.myopener').lightcase({
//.....how to get a.myopener here?
onInit : {
foo: function() {
console.log($(this).data("mydata")); //fails, of course
}
},
});
I can't store, for example, data-attributes to array using onclick event, because lightcase unbind this
$('.myopener').on("click",function(){
var arr={
mydata:$(this).data("mydata")
.....
}
});
Thanks for this great plugin!!
I have some problems with filenames.
If an image filename includes a whitespace, the url opened by lightcase is wrong.
The link:
<a class="lightcase" data-rel="lightcase" href="http://myserver/image 1.jpg">
<img href="http://myserver/thumb 1.jpg" />
</a>
Will try to load:
http://myserver/image
I shows the loading animation and that's it. No pictures.
Here I'm facing a strange issue, if I am closing the lightbox slideshow when it's in mid of loading next image the lightbox closes right there and pops up again with the loaded image therefore continues slideshow as normal.
Is anyone has encountered same issues.? If yes, Someone could help me in resolving this.
Any plans to implement Bower support for dependency management?
Hi, you made a very good plugin!
But I have a problem that I really don't understand. When I click on the images thumbs, the overlay with loader and navigation icons appear, but the images that I would open in lightbox goes loop. i checked the paths and I tried also with external images link, but it don't work.
This is the link of my test page: http://fabbryzz.it/test/lightcase.js/
Can you help me to find the matter? Thanks a lot!
I have logotype in svg format on the page, this is the only one svg image, and after closing lightcase, size of image (or viewbox?...) changing to different... Tried with different html classes - no wrong cascade or other. With png format nothing happened after close
Works well in Firefox, but not in Google Chrome, the pop up photo scales inproportionately and looks terrible as found here http://www.yemiajalastudios.com/fashion
Hello guys,
First of all great work - its really awesome specially for ajax content .
It would be really really easy to handle lightcase - if you guys can add an option to close lightcase via function which is accessible globally.
So if we want to close it we could simply call that function from a button,link & call close function.
As currently only option to close it is through closeOnOverlayClick or clicking it on close button.
When clicking a lightcase link, I get "Uncaught ReferenceError: $case is not defined"
jQuery is present, and all other jQuery functions and plugins work. I've tried isolating just lightcase, with same result.
I'll try duplicating on another site, but this one has me stumped.
UPDATE: I've isolated the page so it's just got jquery 1.10.2 and lightcase. Same issue.
My function call looks like this:
$('a[data-rel^=lightcase]').lightcase();
How to re-write my colorbox code to lightcase?
I'm using colorbox for some POST queries, for example, post form to colorbox
function SendToFormBoxed(name,phone,email,idform,token,formzag){
$.colorbox({
//open: true,
//scrolling: false,
//innerWidth:'500',
href:"post.php",
data:{name:name,phone:phone,email:email,idform:idform,token:token,formzag:formzag},
onComplete:function(){
$.fn.colorbox.resize();
//and other things...
}
});
}
basic interest is post, and event when render finished (onComplete in colorbox)
Hi, I have big problem with this plugin. My goal is to open slideshow/gallery by button click and not to display gallery thumbnails. It didn't work when I hide/add display:none to gallery(links) container and/or I didn't add something inside <a></a>
Is any chance to make it works?
js:
var clickBtnLink = $('#article-id').find('.gallery-links a').eq(1).attr('href');
$('.open-gallery').click(function(){
lightcase.start({href: clickBtnLink});
});
html:
<button class="open-gallery">open</button>
<div class="gallery-links">
<a href="url-to-image" data-rel="lightcase:slideshow-set" class="">have to be something here</a>
</div>
After update to ver. 2.3.3 images don't load on swipe, background size is being updated but image doesn't show. I've checked the demo but you have still ver. 2.3.2 which works ok on swipe so I couldn't verify if is it a global bug or my.
Thanks for Lightcase. Could you please add font path as a variable in the _settings.scss?
Clicking a demo image in iOS loads up a sexy lightcase, bit it also shoots me back to the top of the page, forcing me to scroll back down every time.
Tested in Safari and Chrome on iOS.
When calling a longer page in iFarme on a iPad or iPhone, the content cannot be scrolled.
See a demo here:
http://81.221.34.38/different/lightbox/lightcase/
Hello,
First, thanks for you work.
Second, is there a way to change labels?
I see there is _self.labels object, but as I understand, it's private and can't be changed.
The cleanup function removes all key bindings on the page, including those that don't belong to Lightcase.
$(document).unbind('keyup');
I think namespaced events could help here: https://api.jquery.com/event.namespace/
I notice on line 280 of the CSS document, the border is styled but uses 'rbga' rather than 'rgba'.
Is there a way to define the iFrame size in percentages? For example. I would like my iFrame lightbox to open up at 80% width and 80% height of the viewport.
Thanks
Hi love the work you did on this great script! Just wanted to let you know there's a typo in your Docs:
http://cornel.bopp-art.com/lightcase/documentation/
In Mobile you wrote:
[script type="text/javascript" src="path/to/jquery.events.swipe.js"][/script]
But the file changed and is now:
[script type="text/javascript" src="path/to/jquery.events.touch.js"][/script]
Took me a bit to figure it out (as quickly looking at it, the file names look the same as the character numbers match), but think it'll be helpful to others if you fix the typo. Thanks!
I'm using Lightcase in combination with Magnific Popup. Unfortunately every time I swipe, the popup is triggered. Swiper has callbacks I can use to trigger the popup but I don't know how that would work.
I made some code available here: https://dl.dropboxusercontent.com/u/2177001/bs/index.html
It works perfect in chrome mobile but in safari mobile it just won't let me scroll the iframe content...
Pls help
onClose doesnt seem to do anything for me. I just used your example code, and no alerts fired
Is there something I am missing?
Everything else working fine
$('a[data-rel=lightcase]').lightcase({
// Would be called immediately after lightcase is initialized
onInit : {
foo: function() {
alert('Lightcase process is initialized');
}
},
// Would be called before generating content
onStart : {
bar: function() {
alert('Lightcase process is started');
}
},
// Would be called right before showing the content
onFinish : {
baz: function() {
alert('Lightcase process is finished');
}
},
// Would be called when aborting lightcase
onClose : {
qux: function() {
alert('Lightcase closes now');
}
},
// Would be called when lightcase does the cleanup
onCleanup : {
quux: function() {
alert('Lightcase process is cleaned up');
}
}
});
Please try to do this with your iPhone
1- go here http://www.lineonline.it/idropulitrice-lavor-raptor-21.html
2- Navigate to "Accessori Opzionali" tab
3- Click on one of the products
You will see that the page is not resized and you can not scroll down.
It seems that when you have a form inside a lightcase instance and you submit the form, that triggers the close() on the whole lightcase.
Not sure if that's a bug or not, but it's probably not optimal.
Hello,
Great plugin! thank you so much!
jQuery(document).ready(function($) {
$('a[data-rel^=lightcase]').lightcase({preload: false, autoplay: false});
});
This doesn't seem to work and as far as I can tell my code is correct. Is there something I'm missing or are those options not working right now?
First of all, thank you for the plugin.
Perhaps, it's just my misunderstanding of the documentation, but switching disableShrink property to true doesn't affect applying of shrinkFactor, it still does shrink.
Also, having some images names in uppercase I faced a problem of handling it like an iframe. It's not an issue, I guess, but it baffles a bit, it'd be nice to mention it in docs.
Good Luck!
Especially in "inline" type, I need to selector of opened box.
Because I have multiple inline box in same page and every inline box have slider. However, when inline box opened I initialize slider by classname:
$("a.fair-gallery").lightcase({
onFinish : {
startSlider: function() {
$(".com_fair_images ul").bxSlider();
}
}
});
But this code:
$(".com_fair_images ul")
selects every ".com_fair_images ul" on page. If we have opened box elem in hooks we can write this code:
onFinish : {
startSlider: function(elem) {
$(elem).find(".com_fair_images ul").bxSlider();
}
}
My inline boxes initializer tags autogenerated:
<a href="#com-fair-content-18" class="fair-gallery" data-rel="lightcase:18"></a>
<a href="#com-fair-content-19" class="fair-gallery" data-rel="lightcase:19"></a>
<a href="#com-fair-content-20" class="fair-gallery" data-rel="lightcase:20"></a>
And inline boxes:
<!-- inline Box -->
<div id="com-fair-content-18" class="com-fair-content" style="display: none">
<div class="com_fair_images">
<ul>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
<!-- inline Box -->
<div id="com-fair-content-19" class="com-fair-content" style="display: none">
<div class="com_fair_images">
<ul>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
<!-- inline Box -->
<div id="com-fair-content-20" class="com-fair-content" style="display: none">
<div class="com_fair_images">
<ul>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
If browser view (on desktop) is zoomed out images aren't loaded, after some investigation I found that url is not being set at all in function _determineUrl()
, I've added some logging and device pixel ratio was 0.89 and src.density was 1 so condition _self._devicePixelRatio() >= src.density
is never true. Is it intended?
Hi, i have installed the beautiful lightcase, and it's working 100% on the desktop. But on my android mobile (firefox and chrome) the lightcase behaves in a funny way. the test page is johnnyhardstaff.com/wall2.php. the pop ups are only vimeo videos. the video does not size correctly, and the swipe does not work. (i have not tested on apple devices) can you help please? thanks, steve
Hello,
How can I change close button location?
I want to place it under image in line with title.
Hi,
I really like your plugin, It is neat and clean.
I was checking the documentation and I could find a option to disable the scroll in desktop version, to not allow the user to scroll the main content.
Always I can use the hooks but I was wondering if there is a more clean way to achieve that.
In general I would like to use the similar behaviour than in mobile which remove the main scroll.
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.