Pilot project based on html5 and css3 technologies - DI Gallery

It seems that it is worth moving the monitor, and this cube will live its life right in three-dimensional space.

Cons too! He showed the gallery to his friends - so instead of looking at my works (and praising the author !;)), they took up the gallery itself, playing with its mobile blocks!

Bogdan mylove

Do you like static pictures of the 90s, flat images and standard solutions? This script is not for you!

designfire.ru

DI Gallery - spectacular and compact, like a box of matches. Everything ingenious is simple!

getincss.ru

Gallery demonstration: http://photo.voodee.ru/
Source code: https://github.com/voodee/di_gallery/

Trying to figure out how to get four chicks to sit on one chair;
Oh yeah, turn the chair upside down. CROOKED I

The developers of many browsers stubbornly prevent advertising from reaching a new level and do not provide the ability to open a browser window in full screen without receiving any permission from the user. Because of their fault, one has to invent genius solutions similar to CROOKED I ideas. One of these solutions is to meet a site visitor with a seductive and elegant button, the smooth animation of which makes you think about eternity.

The public part of the project is visualized by projection on three main pages: information text, a list of photos and a list of albums. Each page has its own location in the volume field, so that the planes of the first and third pages are parallel to each other, and both of them are perpendicular to the plane of the second page, and together they represent exactly half the imaginary cube. Those. from two such sets of pages, you can make a figure that looks like a regular hexahedron.

The main project template has the following document layout structure:

< div id = 'Main' >
<section id = 'AreaCube' >
<article> < / article>
<article id = 'CubeAlbum' > < / article>
<article id = 'CubeAbout' > < / article>
< / section>
< / div >

And the corresponding cascading style sheets:

#Main {
position : absolute ;
top : 50 % ; left : 50 % ;
margin : -300px 0 0 -300px ;
height : 600px ; width : 600px ;

-webkit-perspective : 1200px ;
-webkit-perspective-origin : 50 % 50 % ;
-webkit-transition : all 500ms linear ;

-moz-perspective : 1200px ;
-moz-perspective-origin : 50 % 50 % ;
-moz-transition : all 500ms linear ;

-khtml-perspective : 1200px ;
-khtml-perspective-origin : 50 % 50 % ;
-khtml-transition : all 500ms linear ;

-o-perspective : 1200px ;
-o-perspective-origin : 50 % 50 % ;
-o-transition : all 500ms linear ;

-ms-perspective : 1200px ;
-ms-perspective-origin : 50 % 50 % ;
-ms-transition : all 500ms linear ;

perspective : 1200px ;
perspective-origin : 50 % 50 % ;
transition : all 500ms linear ;
}
#AreaCube {
...
transition : transform 500ms linear ;
transform-style : preserve-3d ;
}
#AreaCube > article {
...
transform-style : preserve-3d ;
}
#AreaCube > article : first-child {
...
transform : translateZ ( 300px ) ;
}
#AreaCube > article : nth- child ( 2 ) {
...
transform : rotateY ( 90deg ) translateZ ( 300px ) ;
}
#AreaCube > article : nth- child ( 3 ) {
...
transform : rotateY ( -90deg ) translateZ ( 300px ) ;
}

This document structure has been successfully tested in the works of developers such as Vincent Pintat , Kushagra Agarwal , Diego Ferreiro and David DeSandro .

The gallery itself creates the illusion of the location of photographs at different distances from the viewer. Happy users of the Google Chrome browser can observe a dynamic change in this distance over time. Thanks to the proximity-event plugin, when the cursor approaches the desired photo, it gradually comes to the fore, gets rid of transparency and slightly increases in size, this effect is developed based on the lesson thumbnail proximity effect with jQuery with the addition of volumetric transformation.

When viewing a single photo, the scrolling mode developed by Manoela Ilic using the jQuery thumbnail scroller plugin is turned on by default . There is also a static mode. Moreover, for each mode, images are loaded with a resolution that does not allow the browser to resize the image by its own means, which ensures maximum display quality, minimal dependence on third-party software, and generally an antique with a carnation! Neteye activity indicator will help you get bored while downloading images. Due to security reasons, the end user is not given direct access not only to the image, but even to information about the location of the image, so the file name on the server during public manipulations is encrypted using the php-cypher library . Since image manipulations are performed using the TimThumb library , there is the possibility of applying various filters to the photo, for example such . And yes, thanks to the anchors, you can always throw a link to your favorite photo friends.

The buttons for controlling the viewing mode are for the most part made using fontello web font icons, because everyone knows how boring it is to draw image sprites, it is much more convenient to use a ready-made font with icons, and this service helps to filter out garbage to lighten the weight of the generated font. The functionality of switching to the next or previous photo appears only when necessary, in the normal state it is hidden and does not interfere with having fun.

To reduce energy costs, by reducing the number of body movements during the development of the project, the most popular frontend template was used (according to the results of studies conducted by its developers) - HTML5 Boilerplate. This HTML / CSS / JS template contains page versions adapted to various screens, optimized Google Analytics code, Normalize.css and other helpers of cascading style sheets, as well as the JQuery and Modernizr libraries. This template has been successfully used by Google , Microsoft and Barack Obama .

You are like worms in Obama - you live in a hut. Oxxxymiron

For the server side of the application, a little-known framework modestly called di was chosen . This software implements the (H) MVC pattern in the classic form:

i.e. any request from the user through the dispatcher will be redirected to the Model, she, in turn, will analyze and process it, prepare the system for work and transfer control to the desired controller. Which, in turn, interprets the received data and through the presentation gives it to the user. If necessary, the controller can also change the state of the Model.
Based on the foregoing, the system uses the following file architecture:

controller (place for controllers)
- Controller.php (default controller)
model (heart of the project)
- core (place for classes and libraries)
- data (settings files)
- include (place for third-party libraries)
- index.php (file that will handle user requests)
view (storage location of templates for presentation)
.htaccess (acts as a dispatcher)

A convenient feature of this software tool is the simplicity of creating controllers, for example, you can create a file “echoController.php”, with the following contents:

<? php
class echoController Extends Base {
function index ( ) {
echo 'Hello World!' ;
}

function action ( ) {
echo 'I \' m action ! ';
}
}
?>

Then drop this file into the “controller” folder and you can enjoy the work done. Now if you go to site.com/echo/, you will see the message “Hello World!”, And if you go to site.com/echo/action/, you can see “I'm action!”.

Also, thanks to the use of the singleton pattern in conjunction with php5 buns , it is possible to completely abandon the use of global variables, all the necessary data is available from anywhere in the script. For example, to display a page through the smarty built-in template engine , just write:

<? php
class echoController Extends Base {
function index ( ) {
$ this ( 'smarty' ) -> display ( 'index.tpl' ) ;
// or so
$ this -> smarty -> display ( 'index.tpl' ) ;
// or like this
Core :: inst ( ) -> smarty -> display ( 'index.tpl' ) ;
}
}
?>

Any of the three lines will display the “index.tpl” template located in the “view” folder. In other words, if in the future thirsty pilgrims have an irresistible desire to expand the functionality of this system, then this should not be a problematic act.

The control panel login form, like the entire control panel, is designed in a minimalist style using a set of cascading Metro UI CSS style sheets . At the very top of the page there is a button to return to the gallery and an inscription with a greeting.

If suddenly the user is in the camp of the enemy, where each homunculus strives with trembling hands to throw his gaze over the unhappy person’s shoulder, then of course it would be wise not to make the password public. But if a user tries to break into the control panel while in a greenhouse, carefully guarded by his mother and grandmother, it would be logical to assume that it is more convenient to remove the chains of stars from the entered password. The function of switching the visibility of the entered characters is performed by a helper that appears at the moment when the password input field catches focus.

The helper in the phone number input field deletes the entered data.

Validation of the entered number is done using the PhoneCodes library so that it is possible to filter users by country code. By default, phone numbers with the following country codes are accepted: 7, 375, 380. You can expand this range by editing the file “model / core / class.user.php”, adding the necessary codes in the fourth line.

For people who are able to make a mistake three times when entering their data, an additional opportunity for the project opens, namely the input of humanity verification symbols.

The degree of humanity helps to determine the wonderful script di_captcha , a description of which was published on the habrahabr resource .

Immediately after successfully logging into the control panel, a list of all galleries appears and the ability to create a new one.

To change the order of output of the galleries, it is necessary to use the “mouse” manipulator to capture the line, drag it to the desired position and leave it to its own devices.

To fulfill the insidious plan to delete the gallery, you need to confirm your plan of action, which practically minimizes the possibility of accidentally erasing important information.
After selecting a separate gallery, you can add new photos to it and delete existing ones. Simultaneous downloading of several files, drag-and-drop technology, download indicator, preview and on-the-fly optimization are implemented using jQuery File Upload library .

Put your hands down bitch, I ain't goin 'shoot you
I'm a pull you to this bullet, and put it through you. Eminem

And finally, in order to pass this project off as a creation without fear and risk of bullets, you need to delete copyright information, for this you need to change the text in the WYSIHTML5 editor on the description editing page , which offers a fairly convenient interface.

If suddenly there is not enough space on the edge of the cube with the description to display all the text, a scrollbar appears, implemented using the jQuery vertical scroller plugin . The same goes for the face with the gallery list.

Due to non-standard rendering, computers with outdated graphics cards are slow. This fact, artelno with the fact that not all browsers fully and correctly support the capabilities of cascading style sheets of the third level, became fundamental when creating the mobile version of the project.

Gallery demo: http://photo.voodee.ru/
Control panel demo: ursite.com/log/
Source code: https://github.com/voodee/di_gallery/
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License

Tags:

Pilot project based on html5 and css3 technologies - DI Gallery

Also popular now: