You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 06-06-2013 09:01:51

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Mobile Friendly Lightbox

I think the current lightbox does not working properly when the image is bigger than the screen size. It is good to have the auto-resize feature for the lightbox. Found a way to auto-resize and working for latest lightbox2, getting from GIT repository and it is working with mobile.

For Thomas: Can you share how you previously fit the lightbox as plugin? I mean did you change any codes on it or your template?

Last edited by paulineccl (06-06-2013 10:49:29)

Offline

#2 06-06-2013 10:52:06

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Re: Mobile Friendly Lightbox

Take a look here regarding auto scale... Last posts

http://metro-webdesign.info/forum/viewtopic.php?id=122

smile

Offline

#3 06-06-2013 12:22:44

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile Friendly Lightbox

Thx for showing me the right direction, chrisly. I think i've missed out a lot of things here since i just joined this forum few days ago. Anyway, i can't get any clue from the last post, but instead having some clues from your 1st post.

This is what i've ended-up:
(1) Replaced lightbox plugin with Lightbox v2 MODDED.
(2) Added rel and title tags supported to all the plugin.php in plugins directory and inc/tilefunctions.php, example:

$tileTypes['flip'] = array( /* Defaults*/

	...

	"rels"=>"",
	"lbTitle"=>"",
);
function tile_flip( ... ,$classes,$rels,$lbTitle){

        ...

        <a ... rel="<?php echo $rels;?>"  title="<?php echo $lbTitle;?>" ... >

(3) Use this code for testing on my Android mobile:

$tile[] = array("type"=>"flip","group"=>0,"x"=>0,"y"=>0,'width'=>1,'height'=>1,"background"=>"#333","url"=>"external:img/metro_slide.png",
        "text"=>"Click to see in full","img"=>"img/metro_slide_300x150.png","rels"=>"lightbox");

It works charming! No more worry for lightbox positioning issue and android mobile can treat it as 'lightbox' effect instead of popping-up to another tab.

Oh yes, futher guide can be found here. Hope this will help others wink

One problem Left: My tablet with 3rd party firmware having lightbox effect in dim condition, so to the focused picture. Kindly let me know if there is anyone having the same problem like i did.

Solved after replaced with Lightbox+ (old but very effective). It seems more reliable for most of the browsers and more features such as stretch/shrink, auto-scaling in shrink mode, indicator in stretch mode, more effects as well... Only some minor problems like the right navigation arrow does not place on the correct position while dragging on a stretched BIG image, which the mobile device screen can't afford with. Tested with:
- iPhone4: Built-in browser
- Android: Built-in browser, Dolphin, Chrome, FF
- PC: IE10, GC, FF21, Safari5 and Opera12

The codes seem to working fine with latest jQuery (v1.9.1) too. Also, I've checked with all my tiles and none are broken so far. Personally, I've done few more changes on the original scripts:
- Disabled close event for clicking on image to prevent overlay and indicator artifacts
- Fixed a lot bugs to implement multiple instances
- Replaced with better overlay background
- Added keyboard support
- Fixed position of 'next' navigation button for cross-browsers support
- Fixed mouseover buttons on touchscreen device
- Added touchscreen detector
- Added jQuery mobile browser detector
- Fixed typo error for 'document.body.offsetWidth' and duplicated ';'
- Added image number and count
- Enhanced theme visuality

Sample of results:
Lightbox Plus MODDED

Thinking of adding more features in my free time such as:
- iFrame support
- Auto-enhance color of the buttons
- Auto-slide with timer
- Auto-locate graphic files in specified directory
- More themes

Currently, I'm using lightbox plus + colorbox to serve my needs atm. Colorbox does provide the extra features (such as iFrame, slideshow etc) but not that mobile friendly compare to lightbox plus for photo viewing purpose.

If anyone is testing with this idea, kindly provide feedback.

Last edited by paulineccl (16-06-2013 20:37:32)

Offline

#4 15-06-2013 09:48:46

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Mobile Friendly Lightbox

Hmm it seems I really have to update the lightbox plugin of the template (there are many threads about it). But I don't have any problems with it on the mobile version.

Offline

#5 15-06-2013 12:15:29

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile Friendly Lightbox

I think most of the posted problems are caused by the device screen sizes and browser types, which indirectly cause the visual problem such as position of the buttons & images, CSS etc. Besides, most of the lightboxes (under GPL/MIT license) are incomplete (especially for different device/browser compatibility) which lead to a lot of chicken-egg problems. That's why i suggest better bundles a mobile friendly lightbox to metro template. If you are interested with the lightbox plus which i'm integrating with your template, kindly prompted me. I'm glad to share it out, but not in public (coz' i don't have time to handle the Q&A).

Offline

#6 26-08-2013 11:49:06

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Mobile Friendly Lightbox

Version sended by paulineccl doesn't need so much changes in code to be made to make it works.

It only requires:
(1) Replaced lightbox plugin with Lightbox v2 MODDED.
(2) In file plugin.js of above plugin change:
(2a) line 82 to

return $('body').on('click', 'a[class*=lightbox], area[class*=lightbox]', function(e) {

(2b) line 132 to

if (($link.attr('class')).indexOf('lightbox') != -1) {

(3) Declare tile with "classes"=>"lightbox" like it was, i.e.

$tile[] = array("type"=>"slidefx","group"=>1,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#333","url"=>"external:img/metro_slide.png","text"=>"Click to see in full","img"=>"img/metro_slide_300x150.png","classes"=>"lightbox");

Tested in FF Web Developer responsive views. Previous version of lightbox didn't work, while this works for me and what is more, with version is HTML5 valid!

Cheers.

Last edited by chrismaliszewski (26-08-2013 11:50:31)

Offline

#7 26-08-2013 12:38:35

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Mobile Friendly Lightbox

What is more, if you want have description below image you'll need to make changes in plugin files by adding extra variable storing description, i.e. in plugin tileslidefx in plugin.php:

  1. In definition of tileTypes add "imgTitle"=>"" declaration

  2. In function tile_slidefx declaration add $imgTitle variable

  3. Add title="<?php echo $imgTitle;?>" to <a> at the beginning of this function.

And create tile containing imgTitle that will be description of image:

$tile[] = array("type"=>"slidefx","group"=>1,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#333","url"=>"external:img/metro_slide.png","text"=>"Click to see in full","img"=>"img/metro_slide_300x150.png","imgAlt"=>"Image","imgTitle"=>"Example description","classes"=>"lightbox");

Than in file plugin.css of lightbox plugin in line ".lb-data .lb-caption {" add "color:" tag and write color of description i.e. "#FFF;".

Paulineccl version of Lightbox and tileslidefx with my changes are here.

Last edited by chrismaliszewski (29-08-2013 18:55:30)

Offline

Board footer

Powered by FluxBB