All Projects → xremix → xGallerify

xremix / xGallerify

Licence: MIT license
A lightweight, responsive, smart gallery based on jQuery

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to xGallerify

Filterizr
✨ Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions ✨
Stars: ✭ 546 (+950%)
Mutual labels:  gallery, jquery-plugin, javascript-library
Ptimagealbumviewcontroller
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (+282.69%)
Mutual labels:  gallery, photo
Gallery shell
📷 Bash Script to generate static responsive image web galleries.
Stars: ✭ 198 (+280.77%)
Mutual labels:  gallery, photo
meiupic
简洁好用的多用户图片社区。
Stars: ✭ 165 (+217.31%)
Mutual labels:  gallery, photo
Hugo Theme Console
A minimal, responsive and light theme for Hugo inspired by Linux console.
Stars: ✭ 143 (+175%)
Mutual labels:  gallery, responsive
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+3834.62%)
Mutual labels:  gallery, responsive
Modern.JS
모던 자바스크립트 라이브러리/프레임워크 × KIPFA(한국인터넷전문가협회)
Stars: ✭ 16 (-69.23%)
Mutual labels:  jquery-plugin, javascript-library
Natural Gallery Js
A lazy load, infinite scroll and natural layout list gallery
Stars: ✭ 93 (+78.85%)
Mutual labels:  gallery, responsive
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+13863.46%)
Mutual labels:  gallery, responsive
hes-gallery
Light, dependency free, responsive gallery script
Stars: ✭ 27 (-48.08%)
Mutual labels:  gallery, responsive
tomloprodModal
tomloprodModal is a configurable pure javascript library to create responsive and minimalist modal windows with no dependencies.
Stars: ✭ 17 (-67.31%)
Mutual labels:  responsive, javascript-library
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+3234.62%)
Mutual labels:  gallery, photo
Fotorama
A simple, stunning, powerful jQuery gallery.
Stars: ✭ 1,567 (+2913.46%)
Mutual labels:  gallery, jquery-plugin
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+4230.77%)
Mutual labels:  gallery, responsive
Xzoom
jQuery Zoom Gallery plugin
Stars: ✭ 120 (+130.77%)
Mutual labels:  gallery, jquery-plugin
scalem
A jQuery plugin to make any element scalable (responsive).
Stars: ✭ 33 (-36.54%)
Mutual labels:  jquery-plugin, responsive
kolorwheel.js
🌈 Color palette generator JavaScript library
Stars: ✭ 37 (-28.85%)
Mutual labels:  jquery-plugin, javascript-library
Telegramgallery
world level Gallery , from Telegram,Photo album selector,QQ style
Stars: ✭ 1,294 (+2388.46%)
Mutual labels:  gallery, photo
React Siema
ReactSiema Demo
Stars: ✭ 90 (+73.08%)
Mutual labels:  gallery, photo
photos
"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".
Stars: ✭ 620 (+1092.31%)
Mutual labels:  gallery, photo

xGallerify

npm version Bower version Status Deprecated

!!!!There is a new version of this project, based on angular!!!!

Please check xremix/ng-xGallerify for the latest version of this project. This project will still be maintained with bug fixes.

A lightweight, responsive, smart gallery based on jQuery.

Demo

Check out the Demo or try it yourself with CodePen

To see a real-live sample see the Flickr Demo or try it yourself with the CodePen Sample

Usage

$('.photos').gallerify({
	margin:10,
	mode:'default'
});

In this sample .photos is a <div> containing the images. xGallerify will resize the images in a pleasant way for you.

Custom Styling

Images can be put inside of div's and styled on your own. Check out the full CodePen Demo including all settings, for a sample with a custom styled div.

CDN jsDelivr

The official CDN for xGallerify is hosted on jsDelivr and will support the latest version (served from NPM).

<!-- Latest Version -->
<script src="https://cdn.jsdelivr.net/npm/xgallerify@latest/dist/jquery.xgallerify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xgallerify@latest/dist/jquery.xgallerify.js"></script>


<!-- Specific Version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.xgallerify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.xgallerify.js"></script>

Alternate CDN (rawgit)

Specific branch versions directly from github.com are hosted at the rawgit CDN.

<!-- Master Branch -->
<script src="https://rawgit.com/xremix/xGallerify/master/dist/jquery.xgallerify.js"></script>

<!-- Develop Branch -->
<script src="https://rawgit.com/xremix/xGallerify/develop/dist/jquery.xgallerify.js"></script>

Parameters

Name Default / Options Type Description
margin e.g. 10 int Value in pixels of the margin of each image on each side
galleryMargin e.g. 17 int Value in pixels of the margin outside of the gallery. This is set to 17px default because of some rendering issue on macOS Safari
mode default, bootstrap, bootstrapv4, flickr, small or custom object string or object The style mode wich defines how the gallery should be displayed and how many images fit in a row. See description in the mode section.
lastRow adjust, fullwidth or hidden string Set the last row to the full width, hide it or find a good adjustment. NOTE: I personally prefer adjust, wich is also the default.
jsSetup true or false bool Sets some default CSS values to the elements like dislay:inline-block and for each image inside of a container width:100%. This can be disabled if you want to have your own floating or style this in plain CSS.
debounceTime 0 int This functionality waits x ms before rendering a new loaded image to boost the performance on older machines.
width 800 int Width of the gallery in px - Work in Progress! It is recommended to use an outer div with a specific width to controll the width of the Gallery.

Modes

The modes property defines how many images do show at what container width

NOTE If you want to have another mode you are welcome to contribute or open an issue.
The maximal image height helps to show multiple images in a row, if the images do have a very high ratio like 3:9.

Predefined Modes

Mode Breakpoint Images per row
default mode Container width > 1800 4
Container width > 1200 3
Container width > 768 2
Container width < 768 1
Maximal image height Screen Height * 0.5
bootstrap mode Container width > 1170 4
Container width > 970 3
Container width > 750 2
Container width < 750 1
Maximal image height Screen Height * 0.5
bootstrapv4 mode Container width > 1200 4
Container width > 992 3
Container width > 768 2
Container width < 768 1
Maximal image height Screen Height * 0.5
flickr mode Container width > 1800 4
Container width > 1300 3
Container width > 610 2
Container width < 610 1
Maximal image height Screen Height * 0.4
small mode Container width > 1800 14
Container width > 1300 10
Container width > 610 6
Container width < 610 4
Maximal image height Screen Height * 0.4

Custom Modes

The mode parameter can also be an object that defnies the breakpoints and max height of an image.
Check out the Codepen demo or the following sample object:

var gallery = $('.photos').gallerify({
	margin:5,
	mode:{
		maxHeight: screen.height * 0.5,
		breakPoints:[
			{
				minWidth: 1170,
				columns: 10,
			},{
				minWidth: 970,
				columns: 6,
			},{
				minWidth: 750,
				columns: 3,
			},{
				maxWidth: 750,
				columns: 2,
			}
		]
	},
	lastRow:'adjust'
});

Functions

Render

If new images are added or loaded you can call render to reinitialize the gallery. This will only resize the images to fit again.

$('.photos').gallerify();
//...
$(window).on('load', function() { // Eventlistener that fires when all images are loaded
    $('.photos').gallerify.render();
});

Render Async Images

Automatically renders every time an image has been loaded. This needs to get called everytime you add a new image to .photos after calling gallerify(), if you don't have your own image loaded event listener like described in the Render function documentation.

$('.photos').gallerify();

$('.photos').append('<img src="sample-image.jpg">');
$('.photos').append('<img src="sample-image2.jpg">');
$('.photos').append('<img src="sample-image3.jpg">');

$('.photos').gallerify.renderAsyncImages();

Community

xGallerify AngularJS directive: JohnnyTheTank/angular-xGallerify xGallerify Angular component: xremix/ng-xGallerify

Thanks everyone for contributing. Suggestions are always welcome.
Also I'm happy to hear in which projects you've used the library.

Analytics

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].