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,, 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.

Hi Sega,

This is a tricky one.

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

<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:

<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:

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];

No idea if this will work in practise though …


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.

[ot]Yeah, head.js is great when it works, but a nightmare to debug when it doesn’t :slight_smile:

Good luck![/ot]