[Pro] Responsive Gallery/Carousel?

For those of you designing responsive websites with FWP, have any of you discovered a Carousel or Gallery that works well with FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve done that recently with Exhibeo and extra CSS coding -
http://cssway.thebigerns.com/workbench/exhibeo-flexibilty/


Ernie Simpson

On Sat, Oct 5, 2013 at 12:53 PM, RavenManiac email@hidden wrote:

For those of you designing responsive websites with FWP, have any of you
discovered a Carousel or Gallery that works well with FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Looks good. Any luck with galleries?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m working on one now, from exhibeo. I think it’s a good platform but
requires extra css development.


Ernie Simpson

On Sat, Oct 5, 2013 at 1:38 PM, RavenManiac email@hidden wrote:

Looks good. Any luck with galleries?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

or Gallery

Just a thought for gallery; the Lightbox shipped with Pulse cms:

Used here: Personal Projects :: Scottish Photography by George Logan

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 5 Oct 2013, 8:46 pm, seoras wrote:
Used here: Personal Projects :: Scottish Photography by George Logan

s

Looks good. The only problem is I really like the iOS 7 swipe feature, which it looks like Pulse doesn’t support. However, that is a feature Exhibeo has built into some of its templates, so hopefully Ernie an/or Caleb can develop an FWP/Exhibeo responsive solution. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Looks good. The only problem is I really like the iOS 7 swipe feature,
which it looks like Pulse doesn’t support. However, that is a feature
Exhibeo has built into some of its templates, so hopefully Ernie an/or
Caleb can develop an FWP/Exhibeo responsive solution. :slight_smile:

I can’t speak for Caleb, but it’s a CSS solution… try it. Exhibeo writes
CSS styles, just work it out.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

swipe feature

Dimitry addresses this here: Magnific Popup, A Truly Responsive Lightbox Plugin — Smashing Magazine

Touch Swipe Support

Ern’s and Caleb are the real H4’s I’m just a 4B alternative :wink:

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 5 Oct 2013, 10:15 pm, seoras wrote:

Ern’s and Caleb are the real H4’s I’m just a 4B alternative :wink:

s

I’m usually pretty bright, but you totally lost me with this. H4 vs 4B. Please explain. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Graphite hardness, perhaps? I love my pencils. Just guessing.

Todd

I’m usually pretty bright, but you totally lost me with this. H4 vs 4B. Please explain. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Graphite hardness, perhaps?

Tick.

4B soft and fuzzy, quickly ends up a bit of a stub - occasionally useful.

Blimey ! Must be showing my age, wood and graphite pencils, such old technology, crikey whatever next. :slight_smile: propelling !

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For those of you designing responsive websites with FWP, have any of you discovered a Carousel or Gallery that works well with FWP?

If you want a 100% WYSIWYG experience, then the answer is “not at the moment”.

However, if you are willing to mess with some code and follow directions you have a few more options:

  1. Exhibeo “Slide” theme with a tiny bit of custom CSS. Softpress has said that a flexible version of “Slide” is in the pipeline. Directions below.
  2. WOW Slider. Rather pricey, but fairly simple to use. Not as easy to implement as #1. I have some implementation directions for Backdraft here, but it will work for non-Backdraft websites.
  3. Hype. Super powerful, but rather difficult to implement. Directions here.
  4. Many more if you are willing to forge the path!

Ernie has (very graciously) allowed me to deconstruct the Freeway file for http://cssway.thebigerns.com/workbench/exhibeo-flexibilty/. He has really gone to town with Exhibeo’s output CSS file in that example, but here is the “Caleb’s Simplified Version” of forcing the “Slide” theme to be responsive. (Disclaimer: I have NOT throughly tested this in different browser/OS combinations).

  1. In your FW document, insert the Exhibeo Import action as an inline element. Open up the inspector and exactly match these settings (although you can safely ignore everything in the “Measurements” section):

  2. In the top bar, go to “Page > HTML Markup”. Choose “Before ” from the drop down.

  3. Paste this code in:

     <style type="text/css">
     #slider {
         width: 100% !important;
         height: auto !important;
     }
    
     #slider_exibid {
         width: auto !important;
         height: 0 !important;
         padding-bottom: 60%;
     }
     </style>
    

One thing to note: both uses of the term slider above MUST match the Name/ID of the Exhibeo action in the inspector. For example, if the Name/ID was “SoSmart” then #slider in the CSS above will need to be changed to #SoSmart and #slider_exibid to #SoSmart_exibid.

Tada!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Laughs] The unassuming pencil. Has there ever been a more simple, practical and creative tool capable of such sublime power? Give me interesting subject matter and I can make a pencil sing. Especially those sweet Tombow’s.

Todd

Blimey ! Must be showing my age, wood and graphite pencils, such old technology, crikey whatever next. :slight_smile: propelling !


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is Showcase not sophisticated enough for your use?

On 5 Oct 2013, 4:53 pm, RavenManiac wrote:

For those of you designing responsive websites with FWP, have any of you discovered a Carousel or Gallery that works well with FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is Showcase not sophisticated enough for your use?

Showcase will not work with a flexible-width (and therefor responsive) layouts.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m having an issue implementing the above Exhibeo example with Backdraft. I have a slider thats 1200 x 316, I’ve set the dimensions the same in Freeway, and added the additional markup but when published the image height is huge and not 316 as expected.

The webpage example is here:

And the original Freeway doc is here:

https://dl.dropboxusercontent.com/u/33096171/Backdraft%201.12.zip

I expected to see the slider keep its height of 316 rather than stretch so big. I’ve obviously done something very stupid…!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I expected to see the slider keep its height of 316 rather than stretch so big. I’ve obviously done something very stupid…!

I think that you didn’t, cause both (Ex. and BD) are doing their jobs as expected.

I’ve only two cents in my pocket, so way too less to really rush in here, but if you expect a defined height but a 100% width it would end up in loosing the aspect ratio (the first cent).

If you really want to have a “defined” height but as well the stretching, the only chance I see is background-image: cover; which will mean “digging” a hole hole and adjust the image as good as the browser can.

As far as I know, all galleries, sliders, carousels or whatever place their images as we would do it in Freeway with a graphic-item, but you should have applied them to an HTML-item as bg-image - probably.

As an example, I can only offer the following (especially the three excerpt columns) to “illustrate” what I meant:

http://kimmich-dm.de/templates/stoneoven/index.html

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 22 Oct 2013, 8:27 pm, Thomas Kimmich wrote:

As an example, I can only offer the following (especially the three excerpt columns) to “illustrate” what I meant:

http://kimmich-dm.de/templates/stoneoven/index.html

Cheers

Thomas

I like your example very much thomas. How is this constructed? Is it doable in FW5.6.5?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Neil,

First, I’ve work with some other Backdraft customers on this and have further refined the CSS:

#slide { 
    width: 100% !important;
    height:0 !important; 
    padding-bottom:60%;
}

#slide_exibid {
    width: auto !important; 
    height:0 !important; 
    padding-bottom:60%;
}

Use that instead. (Once again, change #slide to the ID of the Exhibeo action).

To change the aspect ratio, simply change both instances of 60% in the code above with another percentage value. For your pictures, 35% seems like a good place to start.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Caleb,

Many thanks for the swift reply, really appreciate it.

I’ve managed to get it working with the revised CSS, thank you. An example is here:

I would need to adjust the height and percentage in the CSS as it’s not ‘shrinking’ proportionally yet, but it working. The only issue I’m having is if the browser is window is resized during a transition - it leaves a grey block to the side of the banner until the next transition. I assume this is an issue with Exhibeo output.

You can see it here:

http://connectcreative.co.uk/exhibeo/example.jpg

I think for now, I’ll use WOW slider to build the site which will take a couple of months as there’s no rush. In the meantime if Softpress release a true responsive version of the slider I’ll give that a go, otherwise looks like I’ll be purchasing WOW.

Thanks loads for your help on this. And a big thank you to Thomas too - your site example is very interesting - I might use something similar on my nest build! Thank you Thomas.

Neil.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options