SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)

    Mobile Lightbox Only

    I am looking for hints and tips how to do this. I want to use jQuery to have a 320px width display, and run certain script on that display. The idea is to have a responsive 320px width run a completely different lightbox, and if this is something I could do. The lightbox I wanted to implement in the mobile site is this one, http://www.photoswipe.com/, which I feel goes very well. Unfortunately this lightbox does not happen to gel well with the full width website.

    Any pointers would be much appreciated.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Sega,

    This is a tricky one.

    The problem is, that images that display in (for example) Lightbox, look like this:

    HTML Code:
    <a href="images/full/001.jpg" rel="lightbox"><img src="images/thumb/001.jpg" alt="Image 001" /></a>
    Whereas images that display in the plugin you link to, look like this:

    HTML Code:
    <a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a>
    The first thing you will need to do is to hack one of the libraries to use the same rel tag as the other (or, if this is not possible, change it at run time).

    Then you need to determine the screen resolution on page load and load the appropriate library.

    You could probably do something like this:

    Code JavaScript:
    var scriptSrc = 'js/defaults.js';
    if (screen.width <= 350){
      scriptSrc = 'js/library1.js';
    } else  {
      scriptSrc = 'js/library1.js';
    }
    var script = document.createElement('script');
    script.src = scriptSrc;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

    No idea if this will work in practise though ...

  3. #3
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    @Pullo ;

    Thanks Pullo for your reply.

    I was meaning to post something back. I have not tested my findings but I will. Basically I found a script which tell me the width of the browser. From here I can then append the class for a.lightbox into the second lightbox which would be a.lightbox2. I am hoping this would solve the issue. The conditional script works.

    Off Topic:


    Another issue I generally found with my website (unrelated) is that I use head.js to combine scripts and make them faster. Trouble is some scripts jump over other causing them to crash. I think I will have to stay clear from script-cocktails in the future.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Off Topic:

    Yeah, head.js is great when it works, but a nightmare to debug when it doesn't

    Good luck!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •