css display:none for responsive web design

Question

Need advice on what's the best solution to this.

I'm doing a RWD Photo Gallery page. Basically, i'm using pretty photo if accessed through a desktop and photoswipe when accessed in mobile devices.

What i did is this:

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

I hide (display:none) one of them depending of the screen size using media queries. Is this a right approach, i read that using display:none will not reduce the load time. I have hundreds of photos in my gallery and i'm worried this might greatly affect the load time. Is there any good solution to this?

Answer 1

Why do you need two tags for this?

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

You can achieve the same with a single tag.

<a href="large_image" class="desktop_and_mobile" rel="prettyPhoto"><img src="sample_image" /></a>

Now with media query you can have the same desktop_and_mobile class on both media query and define the css property accordingly in each.

This has the advantage that you will be loading only one image, instead of two.

Answer 2

I think that what you want is to have the anchor tag to call the correct lightbox when clicked, because styling the sample_img with responsive css will work as expected, no need for fancy stuff, but if i'm correct then you have 3 choices in my opinion, you can do it like you said and hide the .desktop links using media queries, since the images are exactly the same the user wont have to load again that image, and being set to display:none the user browser won't render that element, so the only downside is that you will have a cluttered html and it will feel muddy, but no other concern in my opinion.

Another option is to use a js code like this one, but since usually lightbox codes will have a method to add event handlers to every link they find with (with the proper formating, lets say its rel), you will have to manually trigger that event after you changed the links rel attr, or execute adaptLinks() before that happens, in that case, on windows resize it won't work, unless you do what i said before. For that you can check how to do it on the lightbox page, they propably have that method listed.

Here is the code

var adaptLinks = (function(){
    var $winHeight = $(window).height();
    var $lightBoxLinks = $('a.lightBox');

    return function() {  
        var isPrettyPhoto = false;

        if($winHeight < 1000){
             $lightBoxLinks
                .removeClass('desktop')
                .addClass('mobile')
                .attr('rel','external');
        } else {
             $lightBoxLinks
                .removeClass('mobile')
                .addClass('desktop')
                .attr('rel','prettyPhoto');

                isPrettyPhoto = true;
        }

        // Call the link processing method of the lightbox
        if(isPrettyPhoto) {
           $lightBoxLinks.prettyPhoto();
        } else {
          // photoSwipe method
        }

    }

})();    

$(window).resize(adaptLinks());

And the thir option, is use a lightbox that works both for desktop and mobiles, i think that is the right way to do it.

Good luck.