Doesn't work properly on mobile

It’s a shame that this is necessary.

I might try out doing the same thing as you.

Can I ask if you have been using some kind of smart feature, custom code etc. to make swipebox work in WordPress?

I am interested, and I’m sure that other persons reaching this page in the future would love that kind of information too.

@roffel, you just did something we can’t do – deregistering jQuery script. We definitely won’t do that in a plugin as it is a VERY bad practice.

Truth is, we can’t update the Swipebox script until WordPress upgrades jQuery to v. 2.x. Unfortunatelly, nobody knows when it happens.

@dfactory, yes, I understand that! Thanks for the reply. You could mention in your plugin, SwipeBox is not fully supported? Or that it is broken… ??

I’m not a die hard programmer. But isnt’t it possible to attach an extra jQuery only used for the SwipeBox scripts?

@squazz: I could write a complete tutorial about it… ??

It comes down to the following (Google the sentences below!):

1. Deregister WordPress jQuery (THIS MIGHT BREAK OTHER PLUGINS). Use Google’s latest jQuery with WordPress. Or enqueue your own.
2. Read Swipebox instructions.
2. Enqueue Javascripts and CSS from Swipebox.
3. Add a filter to your WordPress gallery output, so you can use the Gallery function with your photo’s and add the right classes SwipeBox needs. It’s something like this: add_filter(‘post_gallery’, etcetera (see below). SwipeBox is picky, so use exactly the right markup (that part took me some time).
4. Enjoy your work!

Any thoughts and feedback comments are appreciated.

Cheers!

Rolf

//Custom Gallery Output

add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
    global $post;

    if (isset($attr['orderby'])) {
        $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
        if (!$attr['orderby'])
            unset($attr['orderby']);
    }

    extract(shortcode_atts(array(
        'order' => 'ASC',
        'orderby' => 'menu_order ID',
        'id' => $post->ID,
        'itemtag' => 'dl',
        'icontag' => 'dt',
        'captiontag' => 'dd',
        'columns' => 3,
        'size' => 'thumbnail',
        'include' => '',
        'exclude' => ''
    ), $attr));

    $id = intval($id);
    if ('RAND' == $order) $orderby = 'none';

    if (!empty($include)) {
        $include = preg_replace('/[^0-9,]+/', '', $include);
        $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

        $attachments = array();
        foreach ($_attachments as $key => $val) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    }

    if (empty($attachments)) return '';

    // Here's your actual output, you may customize it to your need
    //$output = "<div class=\"slideshow-wrapper\">\n";
    //$output .= "<div class=\"preloader\"></div>\n";
    //$output .= "<ul data-orbit>\n";

    // Now you loop through each attachment
    foreach ($attachments as $id => $attachment) {
        // Fetch the thumbnail (or full image, it's up to you)
//      $img = wp_get_attachment_image_src($id, 'medium');
//      $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
        $img1 = wp_get_attachment_image_src($id, 'large');
        $img = wp_get_attachment_image_src($id, 'thumbnail');

        //$output .= "<li>\n";

        $output .= "<div class=\"col-xs-4 col-md-3\">\n";
        $output .= "<div class=\"box-gallery-thumbnail\">\n";

        $output .= "<a href=\"$img1[0]\" class=\"swipebox fade\" title=\"myCaption\"><img src=\"{$img[0]}\" alt=\"image\" /></a>\n";
        //$output .= "</li>\n";

        $output .= "</div>\n";
        $output .= "</div>\n";

    }

    //$output .= "</ul>\n";
    //$output .= "</div>\n";

    return $output;
}

@dfactory, just a thought:
As SwipeBox is broken without the upgrade, I’d say that you should mention this somewhere.
Furthermore, you could set up a condition that enables jQuery 2 if a client is using a browser newer than IE8. jQuery 1x & 2x is basically the same, with the exception that jQuery 2 is faster, and doesn’t support IE6,7 & 8. Many developers are using this approach:

<!--[if lt IE 9]><!-->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

From my point of view, you either denounce swipebox, or find a way to present swipebox for users not using IE8 while still supporting IE8 and less. The approach you are taking now is just putting you in a bad light. I for one was sure that it was your fault, how could I know anything else?

@roffel, Thanks! ?? I will try to look at it. In my case I’m only using swipebox for mobile platforms, and as far as I know, IE8 doesn’t exist on mobile platforms, so that’s a win ??

If I come to a better solution I will post it here for everyone to use ??

Swipebox is not broken. We’re using this on dozens of sites and it works properly on desktops, tablets and mobiles.

I don’t know where your issues come from.

Furthermore, Swipebox is just one of five scripts you may chose from depending on your priorities and preferences.

There are also filter hooks available to modify the script depending on the device.

So there are multiple options for you.

When it comes to the code example you provide: this is in our, and many other developers opinion the worst thing you can do to your site in terms of plugin/theme compatibility. About 30% of all Responsive Lightbox support issues come from deregistering the jQuery or other jQuery related modifications of the default WordPress way of handling JS scripts.

So I ask all of you reading this thread: don’t do that in your themes or plugins.

@dfactory, if you are so sure that swipebox works without problems, I invite you to my site and see if you can see why it doesn’t work there. The URL is Squazz.dk

I’m pretty sure that pimo, cloudsben, wp-newbie & roffel would all LOVE to use your plugin, if we find a way to get swipebox working.

I personally have tried to deactivate EVERYTHING but your plugin, and swipebox still gives problems.

@squazz, your site is using JS/CSS minify option in W3 Total Cache, so I can’t really take a look at the scripts your site is running.

Can you disable that feature for a moment?

(BTW, it may be the reason for the RL issues as well)

W3TC & Autoptimize is now disabled (I only use W3TC to control the cache).

For me, there’s no change. As I told you, I have previously tried to disable all of my plugins except your plugin ??

Ok, so that’s what I see at a glance:

1. You’re using prettyphoto, not Swipebox (at least when I looked at it today). The discussion above was all about Swipebox, so I don’t know if you changed the script or there’s a misunderstanding somewhere

2. The prettyphoto script (and the Responsive Lightbox) started to work properly now (it didn’t before the changes in W3TC)

3. Some weird jQuery enqueing in the footer (is it the theme doing that?), after inline jQuery scripts:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' defer='defer'></script>
<script type='text/javascript'>try{jQuery.noConflict();}catch(e){};</script>

4. 7 jQuery is undefined errors starting from:

Line: 553
Error: ReferenceError: jQuery is not defined
Source: https://squazz.dk/israel/vandring-i-jesu-galilaeiske-fodspor/

5. Lazy Load script in use, that might (?) interfere with lightbox scripts

I’m not saying that’s the answer to why you have issues with RL. It’s just a couple of things that need a closer look.

1. I am using prettyPhoto on desktop, and swipebox on mobile.

2. I had no problems with prettyPhoto before

3. I have no idead where the try catch JS comes from. But have the feeling that it may be something that’s left over from Autoptimize as it has a try catch option. I don’t get why it’s there now though.

4. Those errors comes because the sharing box from JetPack is trying to execute jQuery before jQuery beeing implemented. This might be fixed if .ready() was added to the jQuery(document), but I’m no jQuery wizard, so I don’t know. I might contact the JetPack team about this.
Edit: I notified them about my situation here: https://www.ads-software.com/support/topic/problem-with-on-ready-post-load-in-the-sharing-part?replies=1#post-6314777

5. I have now tried to disable Lazy Load for you too. SwipeBox is still not letting me swipe. And sometimes my safari browser tells me id had to reload the page due to “a problem”

regarding (3); Autoptimize only adds try/catch if that option is active. If AO is deactived, the try/catch must be from another plugin.

frank (the ao guy)

@frank Goossens, you are right, it was from another Plugin. It seems that “Speed Booster Pack” puts it there. So now that plugin is disabled too ??
BTW, now that you are here, how do you make your name into a link? I’d love to learn that ??

@squazz; that would be the “Website URL” on your profile edit page, no?

@frank Goossens I have set up my “Website URL” but my username is still not a link :/ Oh well, might just have to live with that ??