Функциональная галерея на PHP и jQuery

About the code Hexagon Gallery

CSS only hexagon gallery.

Responsive: no

Dependencies: -

About the code Masonry Gallery

Responsive CSS Grid masonry gallery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Pure CSS Responsive Gallery

Tired of writing JavaScript? Have you written your fair share of jQuery onclick events? Despair not! For you can make a responsive gallery in just HTML and CSS. All you need are some labels and some exotic CSS. Have fun!

Responsive: yes

Dependencies: -

About the code Gallery

Masonry gallery with scroll effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Responsive Photo Gallery Grid with Lightbox - No Script

Responsive photo gallery updated with lightbox effects. Utilize CSS Grid & Flexbox and no script. Using target property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Simplicity

Simple gallery in HTML, CSS and JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Product Gallery

A minimal single product page built with CSS Flexbox and vanilla JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: 12columns.scss, onicons.css

About the code Horizontal Slider to Gallery Grid

Full responsive grid with awesome mobile UX using one media query and two lines of code.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Seasons Gallery

Pure CSS image gallery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Pop-up/Overlay Gallery

This is a popup overlay design for your portfolio! Display your projects/work in detail with a click of a button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code Image Gallery

Parallax image gallery using figure & figcaption .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: rellax.js


About the code

Image gallery made with flexbox and CSS grid .


About the code

Tumblr photogrid/photoset with flex-box in place of JavaScript.


About the code

Here"s one of an image gallery where you select the img you want to be showcased in the center. The layout is made possible with CSS grid . When switching to a smaller viewport you"ll get a different experience that is made possible by altering the grid-template-columns and grid-template-rows .


About the code

Nice responsive gallery with: CSS columns, roll over, hover caption, magnific popup script, zoom in effect.


About the code

Image gallery animation with HTML, CSS and JS.


About the code

Scrolling & looping gallery. Vanilla HTML/CSS/JS. No Touch Events.


About the code

See the gallery by clicking on the windows.


About the code

Click the info button in the bottom right corner. 😼 WebKit-only because other browsers have poor support for using calc() in place of anything else other than length values.

HTML, CSS and JavaScript portfolio gallery.
Made by Tanmoy Biswas
February 14, 2017

Image gallery with zoom.
Made by wunnle
February 3, 2017

Cube rotate 3D transform gallery.
Made by Lorina Gousi
January 30, 2017


About the code

Gallery hover effect and gallery expanded.

Photobox is the evolution, the next generation of gallery UI & UX code.
Made by Yair Even Or
January 4, 2017

Travel gallery with flexbox and CSS animations/transitions.
Made by Sean Free
January 2, 2017

A gallery that reveals three panels as the user scrolls.
Made by Teegan Lincoln
January 1, 2017

HTML, CSS and JavaScript reflective photo gallery wall experiment.
Made by Shawn Reisner
October 21, 2016

Transitioned gallery for four images.
Made by Dudley Storey
October 14, 2016

It has 24 1920x1080 pictures inside, so it can take a sec to download. It looks cool though. Feel free to play around with variables (transition times, and delays). You can change the number of pictures. Just change the variables in scss and js. Also, if you want to add new pics, just add the url of the pic in the js array.
Made by Kirill Kiyutin
September 9, 2016

Here’s a nice 3D tilted scrolling image gallery implemented using Pete Rojwongsuriya’s jquery.tilted-pagescroll plug-in.
Made by Sebastian Schepis
June 19, 2014

A lightweight extension of Advanced Custom Field (ACF) that adds Photo Gallery field to any post/pages on your WordPress website.

  • Visually create your Fields
  • Add multiple photos and you can also modify title, caption and link to anything
  • Assign your fields to multiple edit pages (via custom location rules)
  • Easily load data through a simple and friendly API
  • Uses the native WordPress custom post type for ease of use and fast processing
  • Uses the native WordPress metadata for ease of use and fast processing
Note

This plugin is alternative of ACF Gallery Pro. You need to have knowledge of coding because you’ll be required to edit your WordPress theme source code. If you are looking for shortcodes and prebuilt gallery then this plugin is NOT for you. This plugin will give you PHP array of images and you’ll need to make the gallery layout as you wish.

Need Help?

Do you need help with the installation, configuration and creating the gallery layout? You can purchase my service on Fiverr.com by following the link https://www.fiverr.com/share/2KAjR8

Usage

acf_photo_gallery is a helper function that takes in ACF_FIELD_NAME and POST_ID will query the database and compile the images for you. The output of this function will be an array.

Acf_photo_gallery(ACF_FIELD_NAME, POST_ID);

Example

The following example is using Twitter Bootstrap framework to layout. You can use any framework of your choice.

" > " title="">

Add Extra Fields

To add extra fields add the following to your themes functions.php file.

//Create extra fields called Altnative Text and Custom Classess function my_extra_gallery_fields($args, $attachment_id, $field){ $args["alt"] = array("type" => "text", "label" => "Altnative Text", "name" => "alt", "value" => get_field($field . "_alt", $attachment_id)); // Creates Altnative Text field $args["class"] = array("type" => "text", "label" => "Custom Classess", "name" => "class", "value" => get_field($field . "_class", $attachment_id)); // Creates Custom Classess field return $args; } add_filter("acf_photo_gallery_image_fields", "my_extra_gallery_fields", 10, 3);

How to get values of extra fields

You can use ACF helper function get_field

Get_field("photo_gallery_alt", $id); get_field("photo_gallery_class", $id);

Pull caption from attachment caption field

By default the caption is being pulled from description field. Add the following filter to your function.php to pull the caption from attachment caption field.

Add_filter("acf_photo_gallery_caption_from_attachment", "__return_true");

REST API

Send HTTP Request to URL to get JSON response of all posts

Http://{domain}/wp-json/wp/v2/{POST_TYPE}/

Send HTTP Request to URL to get JSON response of specific post

Http://{domain}/wp-json/wp/v2/{POST_TYPE}/{POST_ID}/

When you receive the response, see the ACF item which contains ACF photo gallery name and array of images.

Compatibility

This ACF field type is compatible with:
* ACF 4
* ACF 5

Issues

Just like any other WordPress plugin, this plugin can also cause issues with other themes and plugins. If you are facing issues making this plugin work on your WordPress site, please do ask for help in the support forum. This way we can help you out and prevent this issue from happening to someone else. If you want to talk to me directly, you can contact me via my website http://www.navz.me/

Installation
  • Copy the navz-photo-gallery folder into your wp-content/plugins folder
  • Activate the Advanced Custom Fields: Photo Gallery plugin via the plugins admin page
  • Create a new field via ACF and select the Photo Gallery type
  • Please refer to the description for more info regarding the field type settings
    • Changelog

    1.6.5=
    * Remove not empty condition from checkbox item on edit
    * Remove support for ACF to REST API plugin
    * Native support for REST API

    1.6.4=
    * JavaScript error in the console when removing images from the WordPress metabox

    1.6.3=
    * Support for ACF 5
    * Edit gallery with built-in or WordPress native model. Thanks to Github @makepost
    * Under the hood improvements of the codebase
    * Support for RESTFul API with ACF to REST API plugin

    1.6.2=
    * Keep data synced with the attachment data
    * Pull caption attachment caption using add filters
    * PHP 7.2 count() error

    1.6.1=
    * Edit image box disappears on click of pencil edit button reported by @rickytoof9

    1.6.0=
    * Error on saving post with empty gallery. Patch provided by @ugy
    * Showing multiple photo gallery fields in the same page reported by @rickytoof9
    * Support for srcset. Special thanks to @ugy for the code

    1.5.0
    • Support for SVG
    • Support for legacy PHP version
    • Add extra fields
    1.4.0
    • Can sortable gallery images
    • Fixed the order to follow the sort order for gallery images
    1.3.0
    • Change the meta_key from acf field_key to acf field_name
    • Helper function acf_photo_gallery() to pull images
    • Helper function acf_photo_gallery_resize_image to resize the image on fly and save it
    • Issue with target parameter in config
    • Issue with url not saving properly
    1.2.0
    • Support for WordPress 4.6
    • Some changes on on the display
    • Fetch the data from the database
    1.1.0
    • Undefined index: acf-photo-gallery-field on file acf-photo_gallery-v4
    • When delete the photos from the gallery, the last photo was not deleting
    • Gallery photos was not saving in the database

    Gallery on the web and share with friends and family. Some online services are good and convenient. But if you want to host it on your own domain and control them by yourself, there are also many scripts available. Usually, we want the script simple to use and easy to set up without requiring any database . In this post, I introduce 2 PHP scripts.

    Single File PHP Gallery

    Single File PHP Gallery by Kenny Svalgaard

    Single File PHP Gallery is a photo gallery written in PHP. It has only one single PHP file. The thumbnails for photos and directories are generated automatically. Single File PHP Gallery does not require any configuration or skills to use or databases. All you have to do is copy the script to the directory containing your photos to make a gallery. And it automatically organize sub directories as sub galleries.

    Download: http://www.phpgraphy.org/index.php
    Demo: http://www.ericzma.com/photo/index.php (my old photo gallery with customized theme)

    phpGraphy is a free PHP photo gallery script written with simplicity and efficiency in mind following the KISS philosophy. It is released under GPL license. It is easy to install and has minimal requirements. phpGraphy integrates a bunch of nice features like comments, rating, EXIF/IPTC handling. Although phpGraphy can be set up to use databases, you can also choose to use files for storing information for it. The development seems freeze for several years. But the current features should be find for a personal photo gallery.

    Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.

    Первым делом создаем костяк нашей галереи:



    A cool jQuery gallery







    Идея очень проста - PHP скрипт будет сканировать папку на наличие изображений. После этого эти изображения с помощью CSS & jQuery будут превращаться в красивую галерею. Пользоваться подобной галерей очень просто - достаточно только загрузить картинки в папку и результат сразу будет виден на странице.

    $directory = "gallery"; //название папки с изображениями
    $allowed_types=array("jpg","jpeg","gif","png"); //разрешеные типы изображений
    $file_parts=array();
    $ext="";
    $title="";
    $i=0;
    //пробуем открыть папку
    $dir_handle = @opendir($directory) or die("There is an error with your image directory!");
    while ($file = readdir($dir_handle)) //поиск по файлам
    {
    if($file=="." || $file == "..") continue; //пропустить ссылки на другие папки
    $file_parts = explode(".",$file); //разделить имя файла и поместить его в массив
    $ext = strtolower(array_pop($file_parts)); //последний элеменет - это расширение
    $title = implode(".",$file_parts);
    $title = htmlspecialchars($title);
    $nomargin="";
    if(in_array($ext,$allowed_types))
    {
    if(($i+1)%4==0) $nomargin="nomargin"; //последнему изображению в ряде присваевается CSS класс "nomargin"
    echo "

    ".$title."
    ";
    $i++;
    }
    }
    closedir($dir_handle); //закрыть папку

    Сканируя файлы папки и пропуская файлы не изображения, у нас накапливается XHTML код для каждого изображения. Код (линии 28-39) состоит из контейнера с классом pic (и в некоторых случаях nomargin ). С помощью атрибута style мы устанавливаем фоновое изображение в виде нашего изображения. Мы позиционируем картинку в центре, используя 50% 50% . Таким образом изображение выравнивается как по горизонтали, так и по вертикали. Если изображение больше блока, мы видим только центральную его часть (ту часть, которая помещается в контейнер). Таким образом, у нас получаются красивые миниатюры (без необходимости уменьшение самого изображения).

    Это хорошо работает с "нетяжелыми" изображениями. Постарайтесь, не загружать в папку 10 мегапиксельные фото:).

    В блоке находится ссылка, которая ведет к полноразмерному изображению. Название файла служит значением атрибута title . Плагин lightBox использует эти значения и преобразует картинки в галерею. Чтобы изменить описание изображения, необходимо его переименовать.

    У Вас может возникнуть вопрос по поводу класса nomargin ! Для чего он нам нужен? У каждого изображения в галерее есть правый и нижний отступ. Это означает, что последний элемент в каждом ряду не сможет выравняться с правой частью заголовка блока. Это выглядит непрофессионально. Поэтому мы присваиваем специальный класс, который убирает правый отступ для последнего элемента в ряду. В итоге, мы получаем красивый результат.

    Теперь давайте все немного оформим:

    /* first reset some of the elements for browser compatibility */
    body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    }
    body{ /* body */
    margin-top:20px;
    color:white;
    font-size:13px;
    background-color:#222222;
    }
    .clear{ /* clearfix класс */
    clear:both;
    }
    a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
    }
    a:hover{
    text-decoration:underline;
    }
    #container{
    width:890px;
    margin:20px auto;
    }
    #heading,#footer{
    background-color:#2A2A2A;
    border:1px solid #444444;
    height:20px;
    padding:6px 0 25px 15px;
    margin-bottom:30px;
    overflow:hidden;
    }
    #footer{
    height:10px;
    margin:20px 0 20px 0;
    padding:6px 0 11px 15px;
    }
    div.nomargin{ /* nomargin класс */
    margin-right:0px;
    }
    .pic{
    float:left;
    margin:0 15px 15px 0;
    border:5px solid white;
    width:200px;
    height:250px;
    }
    .pic a{
    width:200px;
    height:250px;
    text-indent:-99999px;
    display:block;
    }
    h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    }
    h2{
    font-weight:normal;
    font-size:14px;
    color:white;
    }

    Для правильной работы нам понадобится в шапке документа подключить фреймворк, таблицу стилей и вспомогающие скрипты:





    Еще немного магии:

    // после загрузки страницы
    $(document).ready(function(){
    $(".pic a").lightBox({

    ImageLoading: "lightbox/images/loading.gif",
    imageBtnClose: "lightbox/images/close.gif",
    imageBtnPrev: "lightbox/images/prev.gif",
    imageBtnNext: "lightbox/images/next.gif"
    });
    });

    Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.

    Наша галерея готова! Мне нравится! :)

    Похожие материалы:

    1. Схема блока питания для усилителя двойное моно
    2. Archos Diamond Alpha — смартфон, с которым стоит разобраться Аппаратная платформа и ПО
    3. Windows: управление системой с помощью жестов!
    4. Root, Custom Recovery, Перепрошивка - Lenovo P780 (SLR, ColorOS) Инсталляция Android, обновление, восстановление