brutaldesign / swipebox Goto Github PK

Sorry for my bad english. I have a problem, in my code i have six galleries and i assigned a different class for each one. The first five working well, but the sixth did not, and I do not know what happens. Note.: My javascript skill is limited. ¿Can you help me?

Hi,
I'am using two devices where the swipeboxplugin does not close itself after I'am trigger the swipebox-close button.

-> I have investigated a bit and found out that this is an initial problem because when I'm changing the device orientation everything works fine.

DEVICES:

1. Samsung Galaxy S 3.6 (Android 2.3.6)
2. Samsung Galaxy S 4.0 (Android 2.3.6)

Maybe you have a tip how I can solve this issue adhoc ?

Regards
Ingo Fahrentholz

Hi !
I found that keyboard navigation doesn't work in IE (tested in IE8).
Solution (follow: http://www.quirksmode.org/dom/events/keys.html) is change bind keyup form window to document.
for example in line 360 (jquery.swipebox.js):
$(window).bind('keyup', function(e){ -> $(document).bind('keyup', function(e){

Then it works even in IE.

Sorry for my english ;)

Hi

I have a css file that contains the direction: rtl; for the body

but one I install the plugin it don't show the next images, it shows just the first one

and once I remove the direction rtl it work !!

I hope I find a solution for this problem

Thank You !

When using swipebox on Safari in iOS7, the close and prev/next controls appear at first, but attempting to use them causes the Safari options to appear. This makes it impossible to close the overlay.

I've duplicated the issue on two devices. The simple fix would appear to be moving the buttons to the top bar and/or allowing the overlay to close on tap or pull-down. This is the Facebook app's method, so most iOS users will likely try it by default anyways.

i try to combine swipebox with isotope on one page.
now when i filter my photos on the page with isotope i'm able to remove the swipebox class from my links. and add them if i choose to show another selection.
but swipebox keeps it's original set of pictures, meaning i allways see all the pictures in swipebox and not just the ones that are filterd now.

does anybody have a clue how to fix this?

Hi,

TY for the lib, nearly perfect as I tested ;-)

I try but I don't find how to make the next action on click on the fullscreen image
Can someone help ?

I try things like that in "source/jquery.swipebox.js" ligne 404 (actual version)
"$('.current').bind('click touchend', function(e){
e.preventDefault();
e.stopPropagation();
$this.getNext();
$this.setTimeout();
});"

It would be fine if we had a before and next on left and right of the image too, but it's another thing (if you have track)

Have a nice day

PS : for example, this add works fine
//show bar on mouse move
$(document).bind('mousemove', function(e){
if(!bars.hasClass('visible-bars')) {
$this.showBars();
$this.setTimeout();
}
});

At some point, it'd be great to have this.

Any idea for how to implement vimeo/youtube ?

Will there in the future come f.x. a share on facebook button in the navigationbar?

Works fine on the iPhone but not on Android in the default browser.

Hello, I'm having trouble getting the navigation "icons.svg" to show properly. In fact, they aren't showing up on the screen. The links are there, because if i click on where the arrows should be, i can navigate the images, but they are "invisible"

Also, if i inspect the element (using google chrome) and uncheck the element style that calls the .svg, the .png version displays properly.

What do i need to change to ONLY use the .png version? (icons.png)

Thanks! Everything else is working perfectly.

Hi, this plugin looks really nice. Light and simple.

Would it be complicated to add fade transitions for "desktop" somehow, and keep the swipe for touch devices?

I know this is typical question, that does not really keep the code to a minimum.
But hope you can help!

When using several .js files on some project i want to speed up loading time a little bit by cancatenating them into one file. This will lead to an error "Uncaught TypeError: undefined is not a function" as swipebox minified source file (jquery.swipebox.min.js) is missing semicolon at the end of the code.

I suggest to add semicolon at the end of minified source file.

The problem appears when you use the plugin on a very small screen with a long title.
When the bars on top and bottom are reduced, the end of the title is still on screen.

The sreenshot comes from my desktop (linux mint and firefox), but I have the same problem on my Galaxy S2.

http://pictup.fr.nf/images/Capture_2dyxx2p.png

Thanks

Where can I donate to support this project?

Also, what happens in ie7? Does it just open the image or does it throw an error?

I just tested it, it just flakes out on ie7. I wonder if this will work just to get the images to show up on ie7. I don't care if the box works, or I can use an old copy of fancybox just for ie7. Man I hate IE

    <!--[if gt IE 7]><!-->
    <script src="assets/js/jquery.swipebox.min.js"></script>
    <!--<![endif]-->

    <!--[if lte IE 7]><!-->
    <script src="assets/js/oldfancybox.js"></script>
    <!--<![endif]-->

Okay when there are small number of photos on the list (e.g. ~20). But when the number of photos are large (e.g. 300) it will be very slow. Looks like it caused by it will create a swipebox-caption and swipebox-slider for each photo.

Hi everybody,

Where do I put the options when I load slides dynamically ?

hideBarsDelay : 0, for exemple..

Thanking you in anticipation !

The images are photos captured by the phone camera. It will crash when I view to 90th photos. The photo is not displayed. Just the background can be seen. I am wondering if it can be used for mobile applications. The photo size is 2.0M ~ 3.0M.

Hi, Can we add thumbnails inside the main gallery? Sort of a pagination, bullets system? Thanks!

When the captions are lengthy, they are not fully displayed. Might be a rare use case.

Hi,

Is it very difficult to include support for viewing mp4 and other video formats in swipebox? I know I can use youtube/vimeo urls but my client wants to host videos in his own server for legal reasons.
Could you please add this capability?

Very good plugin, works perfectly!

I wonder if he supports putting the count of photos in the gallery, for example: Photo 1 of 367

Is that possible?

Thank you!

When swipebox is triggered (by clicking on some image) it goes to fullscreen mode. Than the webbrowsers scrollbars are hidden but the area where they were is not filled with dark background overlay.

Same issue with FF and Chrome tested on Linux/Kubuntu.

How do I add an download button to the navigationbar?

Need to add:

?wmode=transparent when you define this:

iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '?wmode=transparent" frameborder="0" allowfullscreen></iframe>';

First of all beautiful plugin!

I was wondering if it's possible to add thumbnail grouping (either by "rel" or "data-swipeboxgroup"). This is so that if there are several groups of thumbnails on a page then opening one will only create a swipebox for the images in its group, rather than all the images on the page.

Hey,

I'm using Swipe Box with the Skeleton Boiler Plate. I don't think there is any other code interfering with the class since images work fine, but it seems like the swipebox-video class is totally inactive.

a class="swipebox-video" rel="group" target="swipebox" href="http://www.youtube.com/watch?v=hOEuCk5qZWw"
img src="images/gallery/thumbnails/mercsintrothumb.png" alt="" class="scale-with-grid"

This sample is using rel="group" because it's grouped with some images, however, even changing it to something like rel="youtube" so it stands by itself still yields no different results.

Here are my active jquery files as well:

jquery-2.0.3.js">
jquery.swipebox.js">
ios-orientationchange-fix.js">
jquery.isotope.min.js"

This problem is happening on Windows 8, iPhone 5, Firefox 22.x, Google Chrome 28.x, Safari and Safari Mobile

Hi, I really like your swipebox and I've been trying to use it in my portfolio site.
I just have one suggestion. When the swipebox starts, could it be slide in to left from right just like the images slide to left from right. It would be nicer if it starts by sliding up from to top. I've been trying to figure it and after I spent couple days I finally decide to ask here. Would it be too complicated? Let me know. Thanks.

Hello

I was wondering whether it is possible to limit the size of the lightbox to the size of the picture - if I only have a picture that's 1024x768, there is no point of showing it full screen on a 1680 monitor as it would blur the picture?

If I build an array of elements (including hrefs with youtube videos) to pass through to swipebox all the images show up but not the videos?

Can it mix and match?

@brutaldesign : Is this project still active ? I know we all need more time :)

Just a heads up about the following errors on the demo page :)

<script type="text/javascript">
jQuery(function($) {
    $(".swipebox").swipebox();
});
<script>

Requires closing script tag.

And this section of pre code:

<script type="text/javascript">
jQuery(function($) {
    $(".swipebox").swipebox({
        useCSS : true, // false will force the use of jQuery for animations
        hideBarsDelay : 3000 // 0 to always show caption and action bar
        videoMaxWidth : 1140, // videos max width
        beforeOpen: function(){}, // called before opening
            afterClose: function(){} // called after closing
    });
});
<script>

Also requires closing script tag and comma after hideBarsDelay : 3000

Thanks for the lightbox script.. very nice!

Hello,
We have just add swipebox to twittstrap resources list
http://twittstrap.com/resources/details/swipebox
Under : Modals
Regards

on click in a image is redirected to fullpath

Is there a solution for using the swipebox together with a tooltip plugin?

The tooltip-plugin kills the title and the swipebox (or any other lightbox) can't get the needed information.

I know this is a general problem and no specific swipebox problem.

When in landscape/fullscreen, Safari's native buttons are over Swipebox controls:

Tested on iOS 6 / iPhone 4

Thanks!

Swipebox doesn't seem to be registered with bower. Having the bower json isn't sufficient.

http://devhike.blogspot.de/2013/06/how-to-register-your-library-or.html

Could you register the package or should I do it?

Thanks!

So I am using swipebox for a situation, when a click on a thumbnail invokes swipebox, however, the thumbnail itself is not loaded into swipebox, and the images are not displayed before invoking swipebox as well. My custom code (use it in WP) looks like this:

jQuery(document).ready(function() {
    jQuery(".swipebox").swipebox({
hideBarsDelay : 0
});
jQuery(".pressthumb").click(function(e) {e.preventDefault(); jQuery(".swipebox").click();});
});

In this case, opened swipebox works like expected, but switches between only first and last image. I have 7 of them in html, only they have display:none, because, as I mentioned, I do not need them to show up in website, just in swipebox... HTML looks like this

<a href="thumb.jpg" class="pressthumb">
    <img src="thumb.jpg">
</a>
<a style="display:none" href="image1.jpg" class="swipebox">
    <img src="image1.jpg">
</a>
//5 more images
<a style="display:none" href="image7.jpg" class="swipebox">
    <img src="image7.jpg">
</a>

Do you have any ideas on the described behaviour?

So far this appears to be working. Tested on android and ios touch devices (tablets and phones) and on ie7, 8, and the modern browsers.

if ("ontouchstart" in document.documentElement) { //load the touch script

jQuery.getScript("assets/js/jquery.swipebox.js", function () {
    jQuery(".popimg").swipebox({
        useCSS: true, // false will force the use of jQuery for animations
        hideBarsDelay: 0 // 0 to always show caption and action bar
    });

});

}
else //load non-touch script
{

jQuery.getScript("assets/js/jquery.colorbox-min.js", function () {
    jQuery('.popimg').colorbox({
        maxWidth: '95%',
        maxHeight: '95%'
    });

    var resizeTimer;
    jQuery(window).resize(function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (jQuery('#cboxOverlay').is(':visible')) {
                jQuery.colorbox.load(true);
            }
        }, 300)
    });
});
}

When on mobile, if you open a lightbox and you try to close it by going for the X at the bottom left the bottom bar of the safari browser will appear and thus cover the X to close the lightbox.

hideBarsDelay: 0 Doesn't seem to be working for me, the bars are still hiding after a small delay.
Can anybody else confirm that this is working for them (have tried on multiple sites I'm working on)

DEVICE: Droid X2
SYSTEM: Android 2.3.5
OS: Eclipse 2.3

Default Browser, Dolphin Browser, Boat Browser - Image box placement is fixed to top of browser window. Swipe and buttons work, but no access to buttons if clicking on an image lower on the page.

Firefox - Image box placement is relative to below browser window. No access to buttons.

Opera Mini, One Browser - No image box, navigates to image link.

UC Browser - Image box placement is correct, buttons and swipe work, but the close button does not. For some reason when you click the close button it goes to the second image in the gallery. Curiously it will actually close the image box if you long press the button, then on release the image box will close.

These are just my observations when testing the script on my device. The webpage I am testing it on is completely minimal, no other css and the content is purely images with links class="swipebox" using the default swipebox source code from github.

Is there some way to use script for better compatibility?

Nice plugin :)

Unfortunately the navigation buttons in the footer (close and prev/next) are not working. By tapping them top and bottom navs just toggling fede in and fade out.

Please check it. Thank you.

• Alex

Should be nice add pinch/zoom support in mobile.

In the destroy function there is a line of code $('body').unbind(); which should be replaced by $('body').unbind('touchstart'); $('body').unbind('touchend');

In a desktop browser environment, when there are multiple YouTube videos if one is playing and the user moves to another via the prev/next navigation the video continues to play. A user can end up with multiple videos playing at the same time. Would it be possible to pause a video when the user navigates away from it through the gallery? Or is there a simple way to hide the Prev/Next navigation if the item is a video?

I've tested with the following desktop browsers in a Win 7-64 environment all with the same results:
Chrome 27.x
Firefox 22
Safari 5.1.7
Opera 12.15
IE 8.x

Note: In testing on iPhone 4 & 5 iOS 6.x/Samsung GS3 Android 4.2.x there doesn't seem to be an issue and I'm guessing all is good on iPads & Android tablets as well.

hi,
It would be nice when you open an image you can zoom in on the image. For example there are many images of text that are unreadable.

The buttons are still there and are click-able but the images aren't, so they're effectively invisible.

I was using iPhone 4 to view it on this site:
http://shawnaguy.com/

Any idea why it would behave this way on this site?
Thanks a lot,

Note: the site only uses Swipebox in mobile. It's using Lightview on PCs.