cbopp-art / lightcase Goto Github PK

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.

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.

It works perfect in chrome mobile but in safari mobile it just won't let me scroll the iframe content...
Pls help

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?

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.

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.

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

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.

upon loading of gallery images, the image is the full-width and without giving the user a hint where to dismiss the lightbox.

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!

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>

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.

Initial State

State after 3 nexts

live on http://absolutely-d.com

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.

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

My form input fields always use border-box to fit 100% of parent width with padding and border without headache. But it crops. Strange, it's more than 100% width of .lightcase-contentInner on the small screen

Full page screenshot

fixed by adding +box to .lightcase-contentInner

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.

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!

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

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

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.

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

Any plans to implement Bower support for dependency management?

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

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!

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/

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?

require('lightcase') fails with "Error: Cannot find module 'lightcase'".
Changing main path to "./src/js/lightcase.js" fixed this for me

1. Many thanks for Lightcase! The thing is great!
2. It looks like “navigateEndless: false” is being ignored when I use the arrow keys on a computer keyboard for moving between images. I can't find a way to fix this. Am I missing something?

Hello,

How can I change close button location?
I want to place it under image in line with title.

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..

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 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

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 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

http://imgur.com/3Y8nCPd

Thanks for Lightcase. Could you please add font path as a variable in the _settings.scss?

I notice on line 280 of the CSS document, the border is styled but uses 'rbga' rather than 'rgba'.

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>

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

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!

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

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.

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/

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?

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.

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 shows the loading animation and that's it. No pictures.

<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")
                        .....
        }       
});

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

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.

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!