loop webYep demo (can I see?) + Gallery CSS

Hello. Im starting with WebYep, and I have 2 questions, please:

  1. I dont know what is the loop, or how it works. I have implemented one in a trial page, and added three elements, and the page shows them three in line, one besides other. Is this a loop? I expected something automatically changing… can I see an example in a url, please?

  2. I like the functionality of the image gallery, and with lightbox is really good. But I would like to know how to change the aspect with the CSS are said in the max action manual, page 39. What i have to do with these words?

manual says in a table:

CSS Class Name - Assigned, to…

.WebYepGalleryContainer
The

tag containing the whole gallery.
You can style the rows and cells of that table with the CSS selectors:
.WebYepGalleryContainer tr and .WebYepGalleryContainer td

.WebYepGalleryFirstRow
the first

tag in the gallery.

.WebYepGalleryFirstColumn
the first

tag in a row.

.WebYepGalleryImage
the

tag surrounding the thumbnail image. You can style the actual image with the CSS selector:
.WebYepGalleryImage img

.WebYepGalleryText
the

tag surrounding the caption.

Thanks!!


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

Hi,

the first one with the loop you can see under:

and the following point “events”. Login and hit the “plus” button to add another instance of a pre-designed simple structure.

The Gallery Extra Styles would be a bit more complicated (and really: Nobody can better express how to do than Max in his manual).

The key is to add a bunch of extra styles to your FW Page that could look something like this:

Proper followed Max’s instructions (and a lot of testings within the settings) it could be achieved something like this:

http://www.kimmich-dm.de/testings/webyepgallerie.php

and really: I achieved without any further questions, so I expect you too :slight_smile:

Cheers

Thomas


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

ahhh, forgot to note, that you need to start with an HTML-Item (DIV) named the way in this example (WebYepGalleryContainer ((I use inline elements with an undefined height)):

Cheers

Thomas


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

Objective Development - WebYep

and the following point “events”. Login and hit the “plus” button to add another instance of a pre-designed simple structure.

Thank you. I supossed loop was like a banner that is changing every 3 seconds, for example, but now I notice that loop is just that you configure something that could be repeated.

The Gallery Extra Styles would be a bit more complicated (and really: Nobody can better express how to do than Max in his manual).

Proper followed Max’s instructions (and a lot of testings within the settings) it could be achieved something like this:

http://www.kimmich-dm.de/testings/webyepgallerie.php

I really like your gallery (male partners here really like the gallery aswell), but, sincerely, I cant understand how to start with this. I followed Max instructions, and create a very simple gallery, but is so simple. I wolud like to do anything else, like in yours. I dont know where do you get what you put in yout image Skitch | Evernote. In which part of the program is this? And in your other image Skitch | Evernote is different aswell from my freeway (Pro 5.5)

I achieved without any further questions, so I expect you too :slight_smile:

I really would like to read your forum, but I cant speak german.

Please, can you explain me a little more…?


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

Again. I supossed you explain this at http://www.kimmich-dm.de/fwp-forum.html#/discussion/57/webyep-gallery/ but is in german… is any place where this explanation could be found in english?

Gracias


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

Hi R,

sorry - but I have actually not time to explain all in detail (maybe tomorrow morning).

The explanation in the forum is unfortunately only in german, (as its nature of a small german freewaytalk I once started).

All the shown features in the screenshots believe me, are available for you, too. You are now entering the world of creating styles (TAG-styles). You reach this on edit → styles. The rest is in the first stage just mechanical typing and choosing.

Walter explained this very detailed how to do in a lot of lists here so probably seek for “tag styles”.

The red framed styles (on the left in one of the screenshots) need to be created.

And of course a simple html element the wy-gallery action applied on. So far for tonight.

Cheers

Thomas


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

Hello. Yes, Im now entering this marvellous world of styles…

In this lapsus of time, Ive found a Max Izzat example (in 2009) of the gallery, and looking everywhere in his example, and copying/pasting, Ive been able to make something (copying/pasting I can learn a lot… because I need to look for every detail…)

Well, so what I just would like to ask you is how can I get the miniature cropped like yours, instead of resized.

Well, for me is enough for tonite aswell… Im looking for creating styles information.


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

The key for this is the tag-style:

.WebYepGalleryImage { overflow:hidden; width:175px; height:110px }

Here is defined how the thumbnail appears. If it is high size, the overflow hidden is just “cropping” the image and forget about all below 110 px.

So really: Type in the tag styles first, some things will be just magic.

Cheers

Thomas


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

yuuuhooo!!! I got it. Thanks. Now Im learning about other style tags.

Only a question: can you make other graphics like drop shadow or reflections?

Another thing I have noticed: with the lightbox you cant download the photo, beceause if you download, what you get is the html file…


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

a note. When I asked for drop shadow, I mean the miniature has the drop shadow. I wolud like to have the miniatures like floating over my background with a drop shadow.

Thanks again.


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

You can get reflections with CSS3 and Webkit

http://www.deltadesign.co/fw_examples/css3-reflector.html

David


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

sorry again. Im trying but nothing. In your exampla, it should be that the light gray is transparent. I cant set it to white because my background is not a color, is an image.

My css style in the page is:

.WebYepGalleryContainer td { border-bottom:solid #cccccc 5px; border-left:solid #cccccc 5px; border-top:solid #cccccc 5px; border-right:solid #cccccc 5px; padding:4px 4px 10px 4px; vertical-align:top; background-color:#2D1B00 }
.WebYepGalleryImage { overflow:hidden; width:125px; height:100px }
.WebYepGalleryImage img { width:125px; height:auto }
.WebYepGalleryText { color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:12px; text-align:center; margin-top:7px }

and what i want is the gray color for the border to be transparent. But if I write transparetn, it dissapears, and the #2D1B00 is continuous in the row.

Thanks again.


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

On 28 Oct 2011, 8:26 pm, DeltaDave wrote:

You can get reflections with CSS3 and Webkit

http://www.deltadesign.co/fw_examples/css3-reflector.html

David

Do you mean http://www.webkit.org/ ?


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

No I mean a webkit based browser such as Safari or Chrome

D


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

ok, sorry. You might think Im crazy, but really I became a bit crazy with that. Ive resolved, adding border-spacing:10px in the .WebYepGalleryContainer, not the .WebYepGalleryContainer td where I was making all the changes…!

But Im still interested in drop shadow applicated to the cells. Is it possible? With the webkit Waltd said?

Thanks a lot


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

On 28 Oct 2011, 8:45 pm, DeltaDave wrote:

No I mean a webkit based browser such as Safari or Chrome

D

I dont really know what you mean, but Ill look for that if this webkit allow to put dropshadows to the cells of the WepYep Gallery.


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

With the webkit Waltd said?

sorry, I meant David


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

But Im still interested in drop shadow applicated to the cells. Is it possible?

Yes you can probably do it with CSS but my example was for a reflection supported by webkit based browsers.

There is a CSS3 shadow action which will produce http://www.deltadesign.co/fw_examples/css3shadow.html

This produces a style

#pengoo { -webkit-box-shadow: 12px 12px 12px #888888; -moz-box-shadow: 12px 12px 12px #888888 }

So with what you are learning about styles you should be able to do something with that.

D


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

So with what you are learning about styles you should be able to do something with that.

D

Ja ja ja . are you sarcastic?

I will try!!


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

OK - let’s have some notes on this (without any claim of correctness).

The most difficult part of the wy-gallery is the fact, that all the images are hold in a table. Aside from the fact, that tables are the strongest tool of holding content, I personal do not often use them, cause in fact, it could be done as well with inline divs instead. If it would be divs, the styling could be a bit more various than the table-cells. So it can be called one of the antique remnant of webyep coding making styling sometimes goofy.

Nonetheless I wrapped some thoughts on this and my result will probably make the css-experts grey hairs (and me too). While this method plays nicely in common browsers (chrome, safari, fox, opera) the biggest disease of the world won’t play this*.

I did the following:

The shadow (or whatever styles) need to be applied to the .WebYepGalleryImage Style. In addition, I made the table-borders to be solid transparent, 20px wide - something like this:

The final result is:

http://www.test.q-ring.de/follower/denim-gallery.php

This is a huge (not yet finished) webyep project, that finally will be shipped out as a (or one of a few) ready built template to use. Isn’t it incredible (and remarkable) what can be done with webyep? With graphic kits it shall be recolored in minutes as well as the basic installations itself - well that’s the plan.

Cheers

Thomas


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