- \n
- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests<\/li>\n
- Customizable through settings and CSS<\/li>\n
- Groups related items and adds navigation.<\/li>\n
- If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well<\/li>\n
- Support fancy transitions by using easing plugin<\/li>\n
- Adds a nice drop shadow under the zoomed item<\/li>\n<\/ul>\n
Demo<\/a><\/strong>
\n![\"fancybox\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/fancybox.png\" "\\"fancybox\\"")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
TN3 Gallery- Egyptian pyramid<\/h3>\n
Features:<\/strong><\/p>\n
TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.
\nDemo<\/a><\/strong>
\n![\"tn3gallery\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/tn3gallery.png\" "\\"tn3gallery\\"")
<\/a>
\n
\n<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
You are finished<\/h3>\n
Features:<\/strong><\/p>\n
The only other thing that you\u2019ll want to implement is some CSS styling. However, jFlow will work perfectly without it. That would obviously only be for aesthetic reasons. If you desire more information, I go over the styling a bit more in the screencast.
\nDemo<\/a><\/strong>
\n![\"you](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/you-are-finished.png\" "\\"you")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Cross slide<\/h3>\n
Features:<\/strong><\/p>\n
CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash or other proprietary plugins. CrossSlide builds upon jQuery\u2019s animation facility, so it is as portable across browsers as jQuery itself (a lot.)<\/p>\n
Demo<\/a><\/strong>
\n![\"cross](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/cross-slide.png\" "\\"cross")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Space Gallery<\/h3>\n
Demo<\/a><\/strong>
\n![\"space](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/space-gallery.png\" "\\"space")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Sliding gallery<\/h3>\n
Features:<\/strong><\/p>\n
The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through.
\nDemo<\/a><\/strong>
\n![\"sliding](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/sliding-gallery.png\" "\\"sliding")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Full screen image gallery<\/h3>\n
Features:<\/strong><\/p>\n
Galleria is a JavaScript image gallery framework. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
\nDemo<\/a><\/strong>
\n![\"galleria\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/galleria.png\" "\\"galleria\\"")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Smooth div scroll<\/h3>\n
Features:<\/strong><\/p>\n
- \n
- Works on touch devices like iPhone, iPad and Android smartphones.<\/li>\n
- Smooth scrolling – no distinct steps<\/li>\n
- Endless loops, if you want.<\/li>\n
- Many different scrolling methods: touch, hot spots, mouse wheel och auto scrolling. Or combinations of these!<\/li>\n
- Make any type of content scrollable, not just images.<\/li>\n
- Easing options for a smoother scrolling experience.<\/li>\n<\/ul>\n
Demo<\/a><\/strong>
\n![\"smooth](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/smooth-div-scroll.png\" "\\"smooth")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Ego gallery<\/h3>\n
Features:<\/strong><\/p>\n
EGOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley\u2019s Thickbox to display larger pictures.<\/p>\n
Demo<\/a><\/strong>
\n![\"ego](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/ego-gallery.png\" "\\"ego")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
JQzoom<\/h3>\n
Features:<\/strong><\/p>\n
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.<\/p>\n
Demo<\/a><\/strong>
\n![\"mind](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/mind-projects.png\" "\\"mind")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Cycle<\/h3>\n
Features:<\/strong><\/p>\n
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before\/after callbacks, click triggers and much more.
\nDemo<\/a><\/strong>
\n![\"cycle](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/cycle-plugin.png\" "\\"cycle")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
House in human hands<\/h3>\n
Demo<\/a><\/strong>
\n![\"house](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/house-in-human-hand.png\" "\\"house")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
WOW slider<\/h3>\n
Demo<\/a><\/strong><\/p>\n
![\"wow](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/wow-slider.png\" "\\"wow")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Nivo Gallery<\/h3>\n
Demo<\/a><\/strong><\/p>\n
![\"nivo](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/nivo-gallery.png\" "\\"nivo")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
BX Gallery<\/h3>\n
Features:<\/strong><\/p>\n
- \n
- automatic thumbnail generation<\/li>\n
- custom size \/ cropping methods for thumbnails<\/li>\n
- thumbnail placement option<\/li>\n
- maximum height and width options for main image<\/li>\n
- opacity hover settings<\/li>\n<\/ul>\n
Demo<\/a><\/strong>
\n![\"bxgallery\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/bxgallery.png\" "\\"bxgallery\\"")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
A piggy in the middle<\/h3>\n
Features:<\/strong><\/p>\n
Visual LightBox JS is a free wizard program that helps you easily generate web photo galleries with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code. Just drag&drop your photos into Visual LightBox window, press “Publish” and your own web gallery with beautiful LightBox 2 effects will open in the browser instantly! No javascript,css,html coding, no image editing, just a click to get your gallery ready.<\/p>\n
Demo<\/a><\/strong>
\n![\"a](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/a-piggy-in-the-middle.png\" "\\"a")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
3D gallery<\/h3>\n
Demo<\/a><\/strong><\/p>\n
![\"3d](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/3d-gallery.png\" "\\"3d")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Super sized<\/h3>\n
Features:<\/strong><\/p>\n
Supersized is a fullscreen background slideshow built using the jQuery library.<\/p>\n
Demo<\/a><\/strong>
\n![\"supersized\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/supersized.png\" "\\"supersized\\"")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Rotating image slider<\/h3>\n
Features:<\/strong><\/p>\n
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will …<\/p>\n
Demo<\/a><\/strong>
\n![\"rotating](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/rotating-image-slider.png\" "\\"rotating")
<\/a><\/p>\n<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
<\/h3>\n
Simple scrollable images<\/h3>\n
Features:<\/strong><\/p>\n
This demo continues from the minimal setup and adds a simple click action to the scrollable items which will open up a larger version of the thumbnail image.<\/p>\n
Demo<\/a><\/strong>
\n![\"simple](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/12\/simple-scrollable-image.png\" "\\"simple")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Fancy Box Features: Can display images, HTML elements, SWF movies, Iframes and also Ajax requests Customizable through settings and CSS Groups related items and adds navigation. If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well Support fancy transitions by using easing plugin Adds a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[160],"tags":[],"class_list":["post-2304","post","type-post","status-publish","format-standard","hentry","category-image-gallery-elements"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2304"}],"version-history":[{"count":12,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2304\/revisions"}],"predecessor-version":[{"id":4152,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2304\/revisions\/4152"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}