X3Photo Gallery Forums

eskimo121 wrote:i see that the images are randomized each time the page is refreshed: http://mjau-mjau.com/concepts/more/just-images/ EXCELLENT ! i hope this feature is available for all gallery formats. This page http://mjau-mjau.com/concepts/more/clean-grid/ however remains the same (same thumbnails) when refreshed.

Some of the demo galleries I have applied sort:shuffle, some not. The shuffle setting is available for all layouts, including albums, and since it shuffles on the client (by javascript), there is no chance of caching or additional processing by the server. I still need to add additional methods for sorting though ...

eskimo121 wrote:By the way, in this page http://mjau-mjau.com/concepts/more/just-images/ the down arrow which goes to the next pic isnt working. It works when u manually scroll (using scroll bar) to the next image and then keeps working after that, but the first image itself does not move when clicked on the down arrow.

Yep. Will have this fixed.

eskimo121 wrote:And about having hundreds of images in a folder, i meant the utility of it for a site like this : http://wallbase.cc/search?q=monochrome as u scroll down, u can see many show up.

This method is generally called "infinite scroll", where images are added into the page on scroll, and you are right we may need to add it at some point. Since X3 lazy loads images into placeholders on scroll, it can handle a large amount of images already without affecting functionality or performance, but if we are speaking "hundreds" then yes probably ...

eskimo121 wrote:Lastly, you are right the share/facebook/twitter options suck and i dont like them either, but just mentioned them anyway since it was a feature in the previous version. However, do implement the "download" and "zoom/superzoom" features.

Roger. I need to figure a nice way to implement grouped command-button for images, which can also be applied to mobile perhaps in a dropdown.

dxodik wrote:thank's
here about what I spoke, a page example with a photo from an Instagram on a tag.
http://www.insidekitemag.ru/2014/06/08/ ... instagram/
http://web.stagram.com/tools

I see each element is an iframe in that first link ... It can definitely be added manually, although I will need to research if there is a method to automatically load in an entire feed from Instagram. For the second link that creates an embeddable code, no problem you can easily add that!

Update! -> Skins
http://mjau-mjau.com/updates/#13jun14

An early sneak peak at two experimental "skins" for X3. Be sure to navigate around the website after selecting a skin, and see how the skin affects elements across all pages:
http://mjau-mjau.com/updates/?skin=1
http://mjau-mjau.com/updates/?skin=2
http://mjau-mjau.com/updates/?skin (default)

What is an X3 "skin"?
A skin in X3 is basically a color scheme that can be applied to the gallery, regardless of structure and layout. A skin is incapable of affecting the actual layout and structure of the gallery (thus the name "skin"). The benefit of this, is that regardless of your selected layout, modules and fonts, you can apply any "skin" to the gallery.

Font Combo
I am still not sure if to combine font-combos with skins, or to have font-combos as separate selections. It would be more elegant to have font-combos tied in with skins, but it is more flexible to have font-combos selected separately for better mix-n-match functionality. There are a few technical issues also, since fonts need to be tied in with the skin css stylesheets. We will focus on offering font combos from Google webfonts, and I should have some demo available shortly.

Layout / Structure
As indicated earlier, we also wish to offer a few main layout variations as soon as we find the time. A layout variation would for example be a left vertical menu, instead of logo and horizontal menu on top as in mjau-mjau.com.

Update!
Carousel layout, smart image sizing, embed options and bugs (less of 'em)!
http://mjau-mjau.com/updates/

The Carousel is a smart layout method for albums- and galleries. It is fully responsive, supports touchscreen gestures, keyboard nav and includes many options. The carousel layout is a good option for teaser pages etc. See examples here in the new "Boulevard" skin:
mjau-mjau.com/concepts/carousel/

With this latest addition to the family of gallery/albums layout methods, I believe we got all bases covered in terms of layout options! I think we are showcasing some of the best implementations of 6 methods vertical, block-grid, justify, columns, slideshow and the recent carousel.

Some comments one this ...

eskimo121 wrote:Hello Karl, one major difference i see in this new X3 compared to the old X2 is that the Fullscreen experience is not the same as before.

First of all, "fullscreen" in X3 is not same as before, because we are within the limitations of html. Furthermore, fullscreen in X3 can be triggered from any viewing state (text, page, gallery, popup), and I assume you added the comment when viewing fullscreen mode from the popup window?

Furthermore, there are other issues with html5 fullscreen mode. It is not supported on iOS, and Chrome will automatically escape fullscreen mode when navigating pages, unless you initiated the fullscreen with native browser controls (for example cmd+shift+f(mac).

The fullscreen method is X3 is available from anywhere, although we currently only have buttons for it in the popup (where it is most feasible), as well as in the vertical scroll navigator. Fullscreen can be added to any page/location, and there are no restrictions in terms of design.

eskimo121 wrote:Currently in the new X3, while in full screen mode the image is centered and many distractions of the dimmed images in the background.

When going fullscreen from within the popup module, then yes the image is centered (should it not be?) and the black background has a very subtle 10% transparency applied just to give the effect of an overlay. I would be willing to debate the opacity, but in my opinion this is not distracting and gives the sense of location and that we are viewing a layer over the existing page from where they started.

eskimo121 wrote:It was a great model in X2 where image was full screen (also able to zoom in more if needed) and image carousel would be shown below to choose (which then becomes invisible when moused is moved to show full image). it was beautiful. I hope you can do this, because right now it just looks like some ordinary joomla/wordpress gallery plugin in full screen mode.

Apart from thumbnails carousel below and zoom, is there anything else you are missing? You gotta keep in mind this popup window is extremely robust, even compared to what we had in X2: It supports ALL devices and aspects, scales nicely, preloads images (+1 left and right), supports swipe and keyboard nav, and is essentially the best way for viewing separate images without distractions. Technically, it is not that different from joomla/wordpress popup windows, but there is a reason why these popular platforms use similar popup windows int he first place, and I would argue we have a smoother implementation in X3 regardless.

We certainly want to integrate thumbnails carousel and zoom buttons though! Other than that, the general nature of the popup will not change too much, and personally I don't see why that is a bad thing ...

Also just for reference, we may integrate other options for 'fullscreen' viewing. Go to the slideshow here and click the fullscreen button, and you will have a similar experience as the fullscreen popup, but with images set to cropToStage, and thumbnails below. We could offer this solution when clicking a thumbnail also, but first things first ...

Edit:
PS! Perhaps you were looking to have images scaled to fill the entire screen for the popup, just as the slideshow link above? This can certainly be an option, but it should not be default. This would only look good for landscape images viewed on a landscape screen ... What happens when the same images are viewed from an ipad or iphone in portrait mode? Tricky business ...

Update! Font Skins!

We have now implemented beta "font-skin" methods into X3, and it is tremendously flexible! The reason we did not want to join font-skins with color-skins, is so that they can be applied separately to create unlimited combinations. Fonts and font-combinations is a chapter to itself in web design, so let me cut the chase and showcase a few font-combinations applied on different skins (for sake of variety).

PS! Keep in mind, fonts are sensitive to website-topic, colors, logo and content, so not all font-skins in the examples suit pages in the mjau-mjau.com playground website, but you should get the general idea. As you can see, I already have a large amount of examples, many which will end as pre-defined font-skins:

Cabin - Bubblegum
Roboto - Yanone Kaffeesatz
Alegreya - Great Vibes
PT Sans - Pacifico
Open Sans - Condensed
Lato - Gentium Book
Asap - Fauna
Inconsolata - Special Elite
Open Sans - Bree Serif
Gudea - Rancho
Lora - Raleway
Lato - Oswald
Roboto - Alegreya
Merriweather - Josefin Sans
Source Sans Pro - Allan
Oxygen - Lobster
Muli - Montserrat
Raleway - Playfair Display
Alef - Cutive
Nobile - Raleway
Istok Web - Francois One
Imprima - Amatic
Asap - Flamenco
Noto Serif - Cabin Condensed
Roboto - Rokkitt
Lato - Medula
Oxygen - Volkhov
ABeeZee - Crete Round
Alegreya - Great Vibes
Roboto - Shadows Into Light
Lato - Lustria
Lora - Montaga
Lora - Ubuntu
Quattrocento - Quattrocento Sans

----------------
Optional Reading:
----------------

Google Webfonts
The fonts in the above examples, are all based on Google Webfonts. We focus on the Google webfonts service, because it offers a large variety of fonts, many of high quality. Additionally, it allows us to set up font schemes that look relatively similar across all devices, platforms and browsers. We can still use traditional device fonts like in this example Georgia - Trebuchet, but there are not many combinations available and they don't look that great to be honest.

In the examples above, we have mostly combined 2 fonts (sometimes 3), which is a recommended count for combining fonts. Depending on the style of the website, we can often choose from many creative title fonts, often contrasting with the paragraph, but for paragraph text we usually need to stick with a legitimate font, and choices are narrowed. Some of the most professional- and popular Google Webfonts come as a family with variations designed to work together, and often look great without being combined with a separate font. Here is a list of the best standalone font options:

Cabin
Ubuntu
Lato
Roboto
Open Sans
Source Sans Pro
Source Serif Pro
Merriweather
Raleway
Lora
Imprima
[PT Serif
PT Sans
Poly
Droid Serif
Droid Sans
Muli
Asap
Noto Serif
Roboto Slab

The following fonts also work nicely in solo, but perhaps not for longer text sections:
Amaranth
Dosis
Yanone Kaffeesatz
Rokkitt
Alegreya
Titillium Web
Inconsolata
Kreon

Design Notes
# You can normally mix two fonts, one for body text and one for header.
# In some cases, you can mix three fonts if you include a specific font for cursive text or menu (slim).
# Two fonts are often combined by making them contrast (serif vs sans-serif, bold vs light etc).
# Titles can usually be creative- and playful, but paragraph text should remain eligible.
# Menu font often requires a slim- or condensed/narrow font to look good. Some font-families come with a sibling narrow font.

Instructions (beta)
Although in the examples we apply font settings as a parameter in the URL, font setting is by default stored in global settings design.font. The font setting supports a few methods:

1. Reference to a predefined font-skin, essentially stored in a font CSS file.
design.font: [font-skin name]

2. A Google Webfonts-like string, referring to what fonts to use where in the website.
design.font: [body(default)], [titles*], [styled*], [slim*]

Body font is required, while title, styled and slim are optional. Styled for certain cursive-styled elements, like lead text. Slim is used in the menu and a few other obscure locations.

3. Reference to a predefined custom font-skin css, from a template css.
design.font: [CUSTOM font-skin name]

---

A long read and a lot of examples in this, but it was good to get it down black-on-white for future reference! I will be initiating a first user gallery this week, so let's see how that goes ...

Edit!
Looking through this post, its awful trying to view all examples ... I will implement a "live" font-skin selector eventually, so font-skins can be reviewed swiftly ...