ajlkn / jquery.poptrox Goto Github PK

Hi,

I have a question - is there a possibility to make a caption longer? I need to enter description, some links in image caption and I think it's impossible to do it only in "title" section.

Thanks in advance and sorry for my poor english ;-)

best regards,
filip

Just a suggestion for a feature. It would be cool to have a slide counter so the user knows how many more slide there are. 1 of 10 or 1/10 etc etc. I guess I can just put it in manually in a caption for now.

It seams the poptrox-popup and overlay divs are not recycled. I implemented a tab control with jquery on my website, and when switching to other tab items, which calls multiple poptrox galleries, there are always newly divs created under the body and html tag, and the dom becomes larger and larger.

Is there a way to recycle the existing poptrox-popup and overlay divs? Or do I have to remove the remaining divs in the dom manually after switching to another tab on my page?

Just FYI.

https://github.com/n33/jquery.poptrox/blob/master/jquery.poptrox.js#L364
https://github.com/n33/jquery.poptrox/blob/master/jquery.poptrox.js#L365

.css('top', (windowHeight / 2) + 'px')
.css('top', (windowHeight / 2) + 'px')

This doesn't look actively maintained buy here's a bug anyway:
Vimeo urls are badly parsed due to a faulty regex. This results in iframe urls looking like src="//player.vimeo.com/video/video/123456789" (note the double video).

I'm having a little issue using jScrollPane (http://jscrollpane.kelvinluck.com/) with Poptrox.
I'm having a gallery inside a div that is vertically scrollable with jScrollPane, and everything is fine except that images rendered below visible area of the scrollable div aren't "poped-up" on click, although they can be previewed if I start the gallery from the iimages that are initially rendered (rendered on page load).
Is this Poptrox relaed or might be something with jScrollPane?

If you set 'popupCaptionTextSize' in the config, it prevents the popup from working.

foo.poptrox({
popupCaptionTextSize: 'XXXXX' // adding this config item breaks the popup
});

Fullscreen button on the vimeo player forces the whole site into full screen mode but not video itself. Even your newest poptrox 2.3.3 demo page have the same issue. Can You fix it somehow?

Is there a way to add the caption dynamically and still be able to show when someone clicks on any image which in turn opens the modal box?

Has anyone come up with a creative way to enforce YouTube videos to play over SSL?

I use the https protocol in the links given to poptrox and Firefox blocks the content.

The web application is all delivered over SSL.

How to add hyperlinks in captions where you can click on it and pops up in new window.

When usePopupForceClose is set to true, the navigation links just close the popup instead of switching to the next image.

There should be a setting for turning off scrolling on the page when the popup is open

Hello,
I'm new with poptrox, but I experiencing a problem when having two "gallery" classes in the same page. The popup closes but leaves a "working" image...
Its not possibel to have two galleries in the same page?
Thank you

• jQuery 1.11.3
• jquery.poptrox 2.5.0

When I click the '.next-vav' or '.prev-nav' the gallery closes automatically. Only works if I navigate with the keyboard.

This condition prevents the popup from being closed while its content is loading, it can be quite annoying - in case of long loading or unwanted popup opening; I use to bypass that, is it vital, what for ? Seems to work fine without ...

// line 514
    .on('poptrox_close', function() {
        if (isLocked)
        return true;

Firstly I init "$('#gallery').poptrox()" ,and then I use ajax to load data (append under $('#gallery') ).Finaly I slide down & click the , but it cause the error which is Uncaught TypeError: Cannot read property 'object' of undefined. How to use poptrox.js when using ajax?

Hi, any quick way of making it possible to scroll/zoom on the pop up once its open? Ive tried a few different ways but no luck?

Any help?

Hi
I am using poptrox (and I love it) and while generating a html snapshot with crawljax I found a div generated from poptrox which is directly under the html tag. I suppose that is the necessary, the question is could it be also under the body tag? Because this will mess up the html snapshot and I have now 2 body tags.

Thanks,
Stef

Dear ajlkn,

thanks to your great lightboy galley plugin my website shines in a new light.

Today I want to ask about your support or a guide in the "right direction":

I understand that the gallery plugin decreases the image dimensions (width, height) if the image is larger than the browser window when viewed.

Is it possible to increase the image dimensions if the image is smaller than the browser window when viewed?

I'm using some images with the dimensions of 320x240, 640x480 but it's very complicated to read the captions and to navigate between the images using the arrow buttons.

My idea is to use your gallery plugin to enlarge these images to the same specific image dimensions used when decrease a larger image.

Thanks for your help.

Best regards

Is there a way to move the navigation buttons outside of lightbox so they will be on the overlay rather the image?

Hi,

This is a great library! I have noticed that when embedding a YouTube video the left and right buttons get covered up and so they can't be clicked.

Kind Regards,

Drew

hi, the nav and close buttons disappear when using YouTube videos

How Can I add a clickable button next to the caption after it pops-up???

I'd like to be able to use Brightcove videos in a poptrox gallery. Would that be possible? I just see support for YouTube and Vimeo.

Thanks for your help.

My gallery does not load when I use any version of jQuery beyond 2.2.4 (which does work). Clicking on the thumbnail image simply pops up a small lightbox with grey loading dots that does not go away. There is no way to get out of the popup without reloading the page (no X button and clicking outside doesn't work).

Switching my jQuery script to grab version 2.2.4 from the CDN makes everything work though, so there is a compatibility issue somewhere.

First, great lightbox!

Whenever an anchor is added with the ignore date attribute, clicking the final item in the gallery logs a javascript error and hangs the page.

I am trying to set the windows size for some videos that I am showing but for some reason the popupwidth or popup height doesn't seem to be doing anything. Also I am was trying to remove the white space where the caption is but the popupcaptionheight doesn't seem to be doing anything either. Is there another place or something that I need to set the size of this window?

Hi,
I'm new to pretty much everything js and am using poptrox for a website I'm making.

I'm trying to display video through an iframe lightbox. I have the video implemented and working fine, however I can't get the fullscreen button to display.

I'm thinking possibly because I have it inside another div?

Here's my html for the video:

`

                 		<a href="video/vid1.mp4" data-poptrox="iframe,1920x1080" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen"  
                                msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen">
                               
                            <img src="images/watch.png" width="50%"  title="heading" alt="watch video" />
                            </a>
                               
  </div>`

In your full documentation i haven't found how to make a image gallery which will allow user to navigate to next and prev images.Otherwise proptext is just awesome and highly customizable plugin ever in this field.

Hi, if you filter an anchor via "ignore" then when you load del list jump the number of times you use the filter. ej.:
<div id="gallery">
<h2><a data-poptrox="ignore" href="#">Skip</h2>
<ul>
<li><a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a></li>
<li><a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a></li>
</ul>
</div>
then when you click on image1.jpg will show you image2.jpg and so on...
There is a way to fix this.

My layout is as follows, I have a index.html which has ajax call as gallery member. That works fine. Ajax calls another html and displays it. But if I want to have another gallery on second html page, it doesn't work. Is there a way to make it work?

When the ignore option is used, the queue index/navPos count still includes these a's, causing incorrect objects to be referenced during navigation. The error is hack-fixed by: adding an object for the ignore type in the initial setup, then checking for and skipping it in poptrox_next, poptrox_previous, and poptrox_open.

Hello,

the plugin works perfect except for one important thing: first, you click on one image, then close it. When you click again on that image, the image doesn't appear (only the loading image).

Could you tell me where is the problem?

Tested local and online, and with your Demo, on Chrome Browser under W7.

Thanks a lot.

Mauricio

After clicking on an image, I get the following errors"

TypeError: a.indexOf is not a function
r.fn.load()
 jquery.min.js:4
e.fn.poptrox/<()
 jquery.poptrox.min.js:2
r.event.dispatch()
 jquery.min.js:3
r.event.add/q.handle()
 jquery.min.js:3
.trigger()
 jquery.min.js:4
.trigger/<()
 jquery.min.js:4
.each()
 jquery.min.js:2
r.prototype.each()
 jquery.min.js:2
.trigger()
 jquery.min.js:4
e.fn.poptrox/</<()
 jquery.poptrox.min.js:2
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.fireWith()
 jquery.min.js:2
gb/i()
 jquery.min.js:3
r.fx.tick()
 jquery.min.js:3
ab()
 jquery.min.js:3
 jquery.min.js:4:18715

And after a while

too much recursion
.camelCase()
 jquery.min.js:2
U.prototype.get()
 jquery.min.js:3
.trigger()
 jquery.min.js:4
.trigger/<()
 jquery.min.js:4
.each()
 jquery.min.js:2
r.prototype.each()
 jquery.min.js:2
.trigger()
 jquery.min.js:4
e.fn.poptrox/</</<()
 jquery.poptrox.min.js:2
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()
 jquery.min.js:3
r.speed/e.complete()
 jquery.min.js:3
r.Callbacks/i()
 jquery.min.js:2
r.Callbacks/j.add()
 jquery.min.js:2
gb()
 jquery.min.js:3
.animate/g()
 jquery.min.js:3
.dequeue()

Hi, I'm having trouble making the Soundcloud playlist embed working as it's only showing the player and not the available tracks down below. Is there a way of using poptrox with the playlists opposite to tracks? Thanks.

Current code:
<a href="https%3A//api.soundcloud.com/playlists/xxxxxxxx" class="button fit" data-poptrox="soundcloud,800x400">Watch</a>

Hi,

I'm currently converting your 'big picture' template freebie into WP theme (WP 3.9.1), I've encountered this issue for jquery.poptrox.. Any thoughts?

BTW, I find it weird that the built-in jquery version of WP doesn't work well with the skel.js, although they have the same version. 1.11.0, I solved it by replacing the WP jquery version with the jquery file included in the template.

Is ther a way to not display caption whenever there is no caption on a picture, but display it when caption exists ?

Hey,

I getting this error when open at second time the same modal

on first time:

after first time:

I'm using this popupIsFixed: true but after first time it's appears ignored.
Another observation is the miss of overflow scroll when in mobile, bacause images is greater than body and after resized become unreadable.

How to close Poptrox on button Click (ajax )

Hey there,

Could you please make the caption clickable? For now, if we add a link or social media button to the caption, the onClick event closes the modal.

$('#four').poptrox({
    caption: function ($a) {
        return $a.attr('title') + ' &rarr; <a href="' + $a.attr('data-link') + '">View on 500px</a>';
    }
});

Also, if a user decides to copy the caption, he can't. Because selecting the text with the mouse will close the modal.

What do you think @n33 ?

I have an img and a nested icon which is showed on top of that image.
The small icon is just an indicator, and also contains a title attribute, which is wrongly picked when the poptrox popup is showed.

Would it be possible, to extend the settings with a captionTextSelector to choose the right title of the image, similar to the "selector" setting which can be overwritten: a:has(img[poptrox])

Line 601: i = a.find('img') -> in my case a.find('img[poptrox]')
Line 606: captionText: i.attr('title'),
Here we should be able to apply a custom selector on the a tag, so the correct title is chosen.

That would be great and solve my problem.

Thanks

Sef

Is there any chance to make this gallery swipe-active? It looks nice on mobiles but finger-swiping doesn't work. Please point me how to implement this.

Thanks a lot.

I don't see any recent development happening on github but I've been experimenting with a 2.5.2-dev version of this plugin that came with the materialize theme.

Any chance you could add a setting for onPopupSwitch and expose $x.attr('src') in the context of onPopupSwitch and onPopupOpen so that one could easily use history.pushState?

Related issue: in Firefox, when binding to the onClick event with pushState, of a link that triggers an iframe poptrox-popup, I was left with a blank iframe modal. Same result unexpectedly occurs in Firefox when triggering the click event of a link on popstate. Seems to work without a hitch in Chrome and Opera though.

I am using PopTrox on this site:
http://boudoir.jirina.fi/
(scroll down to PORTFOLIO and down to last two thumbs)
video is not working on iPhone5 iOS8.3 with Safari. It does work on iPhone with Chorme tho, but "crashes" when turning the phone ... check this video
https://youtu.be/bpywWuyhJt4

I copied the PopTrox Vimeo code from here
https://github.com/n33/jquery.poptrox
and used it like this
< a href="https://vimeo.com/121874333" data-poptrox="vimeo,800x480" class="image fit from-left">

but i dont think there's anything in that cause the video works on iPhone with Chrome.

Sorry for newbie question but I now noticed i have the v2.3.2 version ... and the newest is 2.5.1? Should i download that...?

Hello,

I am not sure how the caption option should work.
Can I use the alt text inside the <img> tag?
Like: <img src="images/1_thumb.jpg" alt="Alt Text" title="Just an image (#1)" />

Thanks,

I'm auto generating links in multiple poptrox containers:

http://jsfiddle.net/oshihirii/E2GZR/

And coming across this error in Firebug > Console > Errors:

TypeError: tmp is null
x.src = x.prefix + '://www.youtube.com/embed/' + tmp[2];
jquery.poptrox.js (line 701)

It doesn't seem to effect operation in the jsFiddle (and therefore may not be a problem) but just wondering if it could possibly cause issues in a more complicated scenario as I am troubleshooting an issue in such a scenario (link not available) and trying to narrow down the cause.

Hi guys,

When working with skel-layers & jquery.poptrox together there seams to be some issues, I just can't find the right way for them to play nicely.

It seams that when skel-layers is in use it pushes the poptrox lightbox to the bottom, If I remove skel-layers it start working the way it should, must be some kind of conflict.

Any hints? Thanks