responsive webdesign - swipe effect for lightbox

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

responsive webdesign - swipe effect for lightbox

Post by macangelo »

Hi all

We are working on our first website with phpwcms for responsive webdesign: pull up on your iPhone or iPad http://traumkleid.com.

Now to the lightbox - watch the problem here at http://traumkleid.com/index.php?de_rembo-styling by clicking on one of the pictures. The light box shows as per default settings in the image-CNT-Parts a "prev" and "next" on a mouse-over status. And of course mobile devices have nothing like a mouse-over (and no, the bamboo stylus hovering over the iPad doesn't do anything either here :wink: ).

I found for example http://swipejs.com but since I'm not a programmer I'm a little helpless here …

Does anybody have any experience with this and can help?

Thanks in advance for any help!

macangelo
Last edited by macangelo on Sun 30. Dec 2012, 20:57, edited 1 time in total.
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: responsive webdesign - swipe effect for lightbox

Post by pepe »

Ask santscho... he has a solution basing on swipe!
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

The standard lightbox of phpwcms is not responsive. big photos are a problem especially on smartphones. The images will not fit automatically to the viewport of such devices. I am currently working on a responsive lightbox (jquery based). Even this lightbox is responsive, it will not work with swipe effect. There are a left and right arrow for navigation. It is also not a replacement for the standard lightbox yet. Means, you need to use the CP Images (special) instead. But it supports cropping of thumbnails and zoomed image and also captions. Maybe I can drive Oliver to replace the core lightbox with my solution in a future release of phpwcms. I have to discuss this with him.

The second solution I have is also for the CP Images (special). The engine I am using is "photoswipe" (http://www.photoswipe.com). All features of photoswipe are supported (pinch zoom, swipe, captions, slideshow...).

I am going to launch two full responsive phpwcms websites within the next days and will also explain features and maybe provide some sources. The websites will also show some other touch swipe based features (image sliders and teasers).

Most probably, I will provide the solutions my clients paid for only for regular solution-contributors in this forum. "Help seekers only" will have to donate to get the full resources. But this is subject of discussion with my forum friends and Oliver.

[EDIT] macangelo, don't worry, you will get the stuff :wink:
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Re: responsive webdesign - swipe effect for lightbox

Post by macangelo »

Hi Santscho

that's good news! Might I ask if you have set yourself a timeframe? I just ask because we originally had planned to go online with this this weekend and would consider to wait for you :wink:

And then I'm of course eager to know how you like what we did. (you can also write a polite feedback, but what I would like to know is what you really think!).

looking forward to hearing from you!

Best
macangelo
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

What do you mean with timeframe? One of the responsive website is online. This is a page with a responsive lightbox feature: http://www.asiangeo.com/index.php?alternating-currency
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Re: responsive webdesign - swipe effect for lightbox

Post by macangelo »

Hi santscho

Looks great! Complements!

What I saw here is the lightbox effect with one image. Does it also work with several images? And being in the lightbox, can you swipe to the next image?

Can I contact you regarding the conditions upon which I could benefit from your work?

Best
macangelo
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

Nope, the lightbox works with all the photos are used in the same content part. At the moment, you need to browse the images with the left/right arrows. There is no swipe function, but I am working on a solution for it. The lightbox is responsive, but I discovered that the captions (if too long) do not have a line break when the screen is too small. Need to fix this. otherwise, text gets cut off left and right on small screens.

BTW: The slider on this page (http://www.asiangeo.com/index.php?asian-geographic) is fully responsive and works with touch swipe. Also the magazine slider at the bottom of the page.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive webdesign - swipe effect for lightbox

Post by update »

I'm interested in this solution too :)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Re: responsive webdesign - swipe effect for lightbox

Post by macangelo »

Hi Santscho

So what do I need to have, to purchase, and to do, to have a responsive and swipy lightbox?

Thank you very much
macangelo
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

You don't need to pay for it. U will just get it. But there is currently no swipe for the lightbox. I need to figure it first. No time at the moment.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Re: responsive webdesign - swipe effect for lightbox

Post by macangelo »

Dear Santscho

thank you for your reply, the information, and the kind offer for me to get the lightbox. Might I ask you to send the non-swipe-but-responsive lightbox for know, so that I can go online?

Thanks a lot
macangelo
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

But are you aware that this lightbox only works with CP images (special)?
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Re: responsive webdesign - swipe effect for lightbox

Post by macangelo »

now I am! :wink: thanks!
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: responsive webdesign - swipe effect for lightbox

Post by santscho »

a complete solution from Oliver downloadable hereé http://forum.phpwcms.org/viewtopic.php? ... 8&start=15
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Post Reply