Full width browser image

Hi, I’d like to achieve a similar result to the example here. The top image appears to fill the browser width and scrolls through a few images. I would use Freeway’s sequence timer to create the fade through slide show, but my question is hwo does one achieve the full browser width image, or is this example set at a certain width with the edges faded off to the colour of an HTML background?

Look forward to anyone’s feedback.


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

Here are 3 of the images

http://www.expeditionsnouvellevague.com/assets/skin/site/header_rafting_4.jpg

http://www.expeditionsnouvellevague.com/assets/skin/site/header_rafting_3.jpg

http://www.expeditionsnouvellevague.com/assets/skin/site/header_rafting_2.jpg

David


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

I am not sure if carousel allows a container width of percent instead of Pixel, but if - I could think of one with a solid background and PNGs as the pane-images.

I did something like this (except of the 100% container cause I didn’t know about this all at that time :slight_smile: here:

Worth a go?

Cheers

Thomas


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

The Carousel Actions that I have written do not allow percentage-based dimensions, because they calculate everything in pixels. There was a recent post here about a flexible / responsive carousel, I can’t lay my hands on it at the moment, but it should be find-able with a quick search.

I did a quickie example yesterday of a way to make a full-width slideshow: Full Screen Slidescripty-slide Background but this is not in an Action-able form yet. Still have to figure out how you would select the images in Freeway. This is all hand-coded, with inline CSS and JS for ease of inspection, so you can see how the trick works. I took care to compose the HTML the way that Freeway would, with a PageDiv and absolutely positioned child elements. The slide elements are positioned outside of the PageDiv (which is something that an Action can do, or which you could do in the Page / HTML Markup dialog, but which cannot be added through the WYSIWYG design model.

Walter

On Jun 26, 2013, at 3:58 AM, Thomas Kimmich wrote:

I am not sure if carousel allows a container width of percent instead of Pixel, but if - I could think of one with a solid background and PNGs as the pane-images.

I did something like this (except of the 100% container cause I didn’t know about this all at that time :slight_smile: here:

http://www.poseidon-duschen.de/

Worth a go?

Cheers

Thomas


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

On 26 Jun 2013, 12:49 pm, waltd wrote:

The Carousel Actions that I have written do not allow percentage-based dimensions, because they calculate everything in pixels.

Yeahh - I expected this honestly.

I did a quickie example yesterday of a way to make a full-width slideshow: Full Screen Slidescripty-slide Background but this is not in an Action-able form yet. Still have to figure out how you would select the images in Freeway. This is all hand-coded, with inline CSS and JS for ease of inspection, so you can see how the trick works. I took care to compose the HTML the way that Freeway would, with a PageDiv and absolutely positioned child elements. The slide elements are positioned outside of the PageDiv (which is something that an Action can do, or which you could do in the Page / HTML Markup dialog, but which cannot be added through the WYSIWYG design model.

Walter

I had a hand-fiddling with the Supersized JQuery Plugin which is (if I’m correctly oriented) the underlying script of the Background Supersizer Action. Unfortunately it is a reduced to the min, cause the original Plugin offers way more possibilities. Furthermore there are significant differences between them. Probably the action should be reviewed for whatever reason. Just for to show the difference:

Using the original script via hand-coding:

http://kimmich-dm.de/box-in-box-model/pizza-template.html

Using Background-Supersizer Action:

http://kimmich-dm.de/box-in-box-model/supersized-test.html

But what I basically wanted to say is, that the bg-supersizer action isn’t to be seen as a real WYSIWYG action as well so that shouldn’t really worry you. The image selection is just a pointing to a folder.

If I could add some wishes to an action script whatever color (Scripty or JQuery):

More transitions then only slide, prev/next btn, a caption for each slide.

And if I may add a rash one:

A list DIV/image feature would be an outermost elegant one.

And a word to Matt as the original list-author:

Not all is wrapped in an action which doesn’t mean, that all those scripts and examples aren’t to integrate into a Freeway-doc (the more or less easy).

Cheers

Thomas


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

slight correction:

There are NO differences between them both - it seemed to be my mistake.

Cheers

Thomas


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

I’ve never offered an Action that just reads a folder’s contents (well, except for the Ajax File Listing Action) because there’s little or no way to control how those contents are presented – in what order, with what label.

On Jun 27, 2013, at 4:10 AM, Thomas Kimmich wrote:

If I could add some wishes to an action script whatever color (Scripty or JQuery):

More transitions then only slide, prev/next btn, a caption for each slide.

This example started with a fade, and came directly out of the work to fix the ScriptyFader (now in Beta 2, as mentioned elsewhere not too long ago). What other effects do you imagine would work in this context?

If you wanted to make a caption for each slide, where would you put it? How would you control its positioning?

Right now, this example uses CSS3 background-size controls to force the image to fill the screen. I have a shim somewhere around here that will polyfill that effect onto less-capable browsers, but it’s not enabled in this example. One of the things I was thinking about when I was coding this was "what if you wanted to use this as a stripe across the page, or a relative-positioned element? How would you do that? The answers are not immediately obvious, because the layout problems when integrating a fake background with a page are not easily solved.

And if I may add a rash one:

A list DIV/image feature would be an outermost elegant one.

Meaning what, exactly? A list of all the possible screens? Can you make a static example of how that would look and explain what you could do with that?

Walter


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

This example started with a fade, and came directly out of the work to fix the ScriptyFader (now in Beta 2, as mentioned elsewhere not too long ago). What other effects do you imagine would work in this context?

Good question.

Basically I tend to say that with fade and slide nearly everything is covered (and I’m not sure if Puff, Pulsate, Shake or Squish are really alternatives :-).

If you wanted to make a caption for each slide, where would you put it? How would you control its positioning?

No idea yet - but a caption was the first thing I thought of to make HTML Text permanently stick to an image (slide).

Right now, this example uses CSS3 background-size controls to force the image to fill the screen. I have a shim somewhere around here that will polyfill that effect onto less-capable browsers, but it’s not enabled in this example. One of the things I was thinking about when I was coding this was "what if you wanted to use this as a stripe across the page, or a relative-positioned element? How would you do that? The answers are not immediately obvious, because the layout problems when integrating a fake background with a page are not easily solved.

And if I may add a rash one:

A list DIV/image feature would be an outermost elegant one.

Meaning what, exactly? A list of all the possible screens? Can you make a static example of how that would look and explain what you could do with that?

Walter

Let me say it that way:

I’m currently playing with RoyalSlider, a paid jQuery Plugin that offers a great range of Slideshows. ( RoyalSlider - Touch-Enabled Image Gallery and Content Slider Plugin ) and added it in an example here:

http://buenavista-architecture.de/ (somewhere in the middle)

The MarkUp is mostly (I don’t mind about a little handcode and add it finally via CrowBar) something like that:

In Freeway this is simply impossible to rebuild (as far as I know but that’s not much). And there are a couple of more popular examples that are even list divs.

As I said:

I’m not talking about me cause I’m more or less able to deal with all of this - I’m simply thinking about all here that aren’t able and how to support them.

And the WORLD BEST slider construction is anyway YOUR carousel - unrivaled.

Cheers

Thomas


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

quick add here which was more WYSIWYG:

an example of a Slider with different contents (Fully responsive):

http://kimmich-dm.de/box-in-box-model/rs-content.html

Cheers

Thomas


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

You can put divs in a list, that’s definitely not hard to do in Freeway, but it’s a really useless thing to do when all you are trying to do is divine a structure from a collection of elements. If you were to put the same collection of DIVs into a parent DIV (nested boxes), they would have an implicit structure just from their hierarchical position in the code. The example I posted does precisely this:

<div class="slides">
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
</div>

(Typed off the top of my head, so probably not exactly the same, and using simplified names)

When the page loads, I loop through each of the .slide elements and assign it its “net” (next) attribute, so it knows where to animate to.

$$('.slide').each(function(elm){
	elm['nxt'] = (elm.next('.slide')) ? elm.next('.slide') : $$('.slide').first();
});

(That’s also slightly different than the example, and not ideal, because it won’t allow multiple instances of this effect. Need to think some more about this.)

But once that relationship is set up, the rest is really easy. You can animate to the next element in whatever effect you prefer, because you can set the before and after state for the two elements (current and next). You could even use CSS transitions instead of JavaScript, for hardware-accellerated goodness, and only fill in with JavaScript on IE and older browsers.

To get the effect you show in your example page, you would just have to add a “prev” attribute to each element, using the same technique in reverse, and then the rest is the same.

So my point is that the HTML structure (a UL or just a bunch of DIVs inside another DIV) doesn’t make the effect work or not – that’s just how the designer of the particular jQuery effect you’re using decided to access the list of elements. And it makes a sort of semantic sense – you have a list of elements, so putting them in a UL gives them an implicit structure that the box of boxes lacks.

Walter

On Jun 27, 2013, at 9:56 AM, Thomas Kimmich wrote:

In Freeway this is simply impossible to rebuild (as far as I know but that’s not much). And there are a couple of more popular examples that are even list divs.


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