Experimental project based on html5 and css3 technologies - DI Gallery

It seems that it is worthwhile to push the monitor away, and this cube will live its life right in three-dimensional space.

designfire.ru

Cons, too! I showed the gallery to my friends - 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 from 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. All ingenious is simple!

getincss.ru


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

')

Trying to get four chicks to go on;
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 to full screen without any permission from the user. It is their fault that you have to invent solutions for genius similar to the ideas of CROOKED I. One of these solutions is to meet the 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 a projection on three main pages: an informational 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 of the imaginary cube. Those. From these two sets of pages, you can create a shape similar to a regular hexahedron.

The main project template has the following document markup structure:

1. < div id = 'Main' >
2. <section id = 'AreaCube' >
3. <article> < / article>
4. <article id = 'CubeAlbum' > < / article>
5. <article id = 'CubeAbout' > < / article>
6. < / section>
7. < / div >

And the corresponding cascading style sheets:

1. #Main {
2. position : absolute ;
3. top : 50 % ; left : 50 % ;
4. margin : -300px 0 0 -300px ;
5. height : 600px ; width : 600px ;
7. -webkit-perspective : 1200px ;
8. -webkit-perspective-origin : 50 % 50 % ;
9. -webkit-transition : all 500ms linear ;
11. -moz-perspective : 1200px ;
12. -moz-perspective-origin : 50 % 50 % ;
13. -moz-transition : all 500ms linear ;
15. -khtml-perspective : 1200px ;
16. -khtml-perspective-origin : 50 % 50 % ;
17. -khtml-transition : all 500ms linear ;
19. -o-perspective : 1200px ;
20. -o-perspective-origin : 50 % 50 % ;
21. -o-transition : all 500ms linear ;
23. -ms-perspective : 1200px ;
24. -ms-perspective-origin : 50 % 50 % ;
25. -ms-transition : all 500ms linear ;
27. perspective : 1200px ;
28. perspective-origin : 50 % 50 % ;
29. transition : all 500ms linear ;
30. }
31. #AreaCube {
32. ...
33. transition : transform 500ms linear ;
34. transform-style : preserve-3d ;
35. }
36. #AreaCube > article {
37. ...
38. transform-style : preserve-3d ;
39. }
40. #AreaCube > article : first-child {
41. ...
42. transform : translateZ ( 300px ) ;
43. }
44. #AreaCube > article : nth- child ( 2 ) {
45. ...
46. transform : rotateY ( 90deg ) translateZ ( 300px ) ;
47. }
48. #AreaCube > article : nth- child ( 3 ) {
49. ...
50. transform : rotateY ( -90deg ) translateZ ( 300px ) ;
51. }

This document structure was successfully tested in writings by developers such as Vincent Pintat , Kushagra Agarwal , Diego Ferreiro and David DeSandro .

In the gallery itself creates the illusion of the location of photos at different distances from the viewer. Happy users of the Google Chrome browser can observe a dynamic change of 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 was developed based on the lesson thumbnail proximity effect with jQuery with the addition of volumetric transformation.

When viewing a single photo, the default is the scroll image mode developed by Manoela Ilic using the jQuery plugin thumbnail scroller . There is also a static mode. And for each mode, images are loaded with a resolution that does not allow the browser to resize the image with its own means, which ensures maximum display quality, minimal dependence on third-party software, and generally antique with a pink! Do not get bored while downloading images will help neteye activity indicator . 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 the image manipulations are performed using the TimThumb library, it is possible to overlay various filters on the photo, for example. And yes, thanks to the anchors, you can always throw a link to your favorite photo friends.

Most of the browsing control buttons are made using fontello web font icons , as everyone knows how tedious to draw image sprites, it’s much more convenient to use ready-made font with icons, and this service helps weed out trash 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 enjoyment.

To reduce energy consumption, by reducing the number of gestures in the development of the project, the most popular (according to the results of research conducted by its developers) front-end template - HTML5 Boilerplate was used . This HTML / CSS / JS template contains pages adapted for different screens, optimized Google Analytics code, Normalize.css and other cascading style sheet helpers, as well as the jQuery and Modernizr libraries. This template was successfully used by Google , Microsoft and Barack Obama .

You are like Obama's worms — you live in a barrack. Oxxxymiron

For the server side of the application, a little-known framework, modestly named di, was chosen. In this software, the (H) MVC pattern is implemented in the classical form:

Those. any request from the user will be redirected to the Model through the dispatcher, it will in turn analyze and process it, prepare the system for operation and transfer control to the required controller. Which, in turn, interprets the data and gives it to the user through the presentation. If necessary, the controller can also change the state of the Model.
Based on the above, 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 (space for third-party libraries)
  • index.php (file that will handle user requests)
• view (place to store templates for presentation)
• .htaccess (plays the role of manager)

A convenient feature of this software is the ease of creating controllers, for example, you can create a file "echoController.php", with the following content:

1. <? php
2. class echoController Extends Base {
3. function index ( ) {
4. echo 'Hello World!' ;
5. }
7. function action ( ) {
8. echo 'I \' m action ! ';
9. }
10. }
11. ?>

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

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

1. <? php
2. class echoController Extends Base {
3. function index ( ) {
4. $ this ( 'smarty' ) -> display ( 'index.tpl' ) ;
5. // or so
6. $ this -> smarty -> display ( 'index.tpl' ) ;
7. // or like this
8. Core :: inst ( ) -> smarty -> display ( 'index.tpl' ) ;
9. }
10. }
11. ?>

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 will have an overwhelming desire to expand the functionality of this system, this should not be a problematic act.



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

If suddenly the user is in the enemy's camp, where every homunculus strives to throw his eyes over the unfortunate one with shaking hands, then of course it would be wise not to give the password to the public. But if a user tries to break into the control panel while being in a greenhouse, carefully guarded by his mother and grandmother, then it would be logical to assume that it is more convenient to remove the shackles of asterisks from the password entered. The function of switching the visibility of the entered characters is performed by the helper, which appears at the moment when the password entry field catches the focus.

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

Checking the correctness of the entered number is done using the PhoneCodes library , thanks to which 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 can make a mistake three times when entering their data, an additional opportunity of the project, namely the input of characters checking humanity, opens up.


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

Immediately after a successful login to the control panel, a list of all galleries and the ability to create a new one appears.

To change the display order of the galleries, use the mouse to capture the line, drag it to the desired position and abandon it to its fate.

For the execution of the insidious plan to remove the gallery, it is necessary to confirm the plan of their actions, 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 loading of multiple files, “drag-and-drop” technology, download indicator, preview and on-the-fly optimization are implemented using the jQuery File Upload library.

Put your hands down bitch, I ain't goin 'shoot you
I’m putting you in there. Eminem

And finally, so without fear and risk of being strained by a bullet to issue this project for your creation, you must remove the copyright information, for this you need to change the text in the WYSIHTML5 editor, which offers a fairly user-friendly interface, on the description edit page.

If suddenly there is not enough space on the verge of the cube with the description to display all the text, then a scroll bar will appear, implemented using the jQuery vertical scroller plugin . The same goes for the face with the list of galleries.

Due to non-standard rendering on computers with outdated video cards, there is a slowdown. This fact artel with the idea that not all browsers fully and correctly support the capabilities of the cascading style sheets of the third level, was fundamental in creating a mobile version of the project.

Gallery demonstration: http://photo.voodee.ru/
Demonstration of the control panel: ursite.com/log/
Source code: https://github.com/voodee/di_gallery/
This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License