| 20 Best jQuery Slideshow / Photo Gallery Plugins (0) | 2012.02.29 |
|---|---|
| Prototype에서 jQuery로 옮겨타기 (0) | 2011.07.31 |
| Firebug의 console 파헤치기. (0) | 2011.07.19 |
| fireBug 사용법 (0) | 2011.07.19 |
| [jQuery] firebug로 디버그 (0) | 2011.07.19 |
Photo Gallery, picture gallery, or slideshow are the best way to showcase your images / photos to your readers. This post is a showcase of 20 best jQuery slideshow / photo gallery plugins .
20 Best jQuery Slideshow / Photo Gallery Plugins
Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project.
Galleriffic is a jQuery Slideshow plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
Nivo Slider is a lightweight jQuery Slideshow plugin for creating good-looking image sliders.
AviaSlider is a jQuery Slideshow plugin with very unique transition effects.
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.
Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw.
SpaceGallery is onother cool jQuery Slideshow plugin display Your images.
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally.
jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.
JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.
This is a cool jQuery Slideshow Plugin to show images as gallery
Supersized is an image gallery built by BuildInternet.com and it is able to slideshows the images with full screen.
EOGallery is a web animated slideshow gallery made with jQuery.
PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired.
Pirobox is lightweight jQuery Lightbox script.
CrossSlide is a jQuery plugin implementing some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)
jQuery Image Slider with Unique Effects.
jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery.
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth.
Related posts:
| jquery slideshow (0) | 2012.02.29 |
|---|---|
| Prototype에서 jQuery로 옮겨타기 (0) | 2011.07.31 |
| Firebug의 console 파헤치기. (0) | 2011.07.19 |
| fireBug 사용법 (0) | 2011.07.19 |
| [jQuery] firebug로 디버그 (0) | 2011.07.19 |
$('element'); //=> DOM element object
$('#element'); //=> jQuery(Array-like Object) object
$('element'); //=> DOM element object
$('#element').get(0); //=> DOM element object
$('element1','element2','element3'); //=> Array
$('#element1,#element2,#element3'); //=> jQuery object
element.down('div.item'); //=> DOM element object
element.children('div.item'); //=> jQuery object
element.up('div.contents'); //=> DOM element object
element.parent('div.contents'); //=> jQuery object
element.up('div.container'); //=> DOM element object
element.parents('div.container:first'); //=> jQuery object
element.next('div.item'); //=> DOM element object
element.next('div.item'); //=> jQuery object
element.previous('div.item'); //=> DOM element object
element.prev('div.item'); //=> jQuery object
element.select('div.item'); //=> Array
element.find('div.item'); //=> jQuery object
$('element').select('input[type="button"]'); //=> Array
$('#element input[type=button]'); //=> jQuery object
$$('#element a[href=#]')[0]; //=> DOM element object
$('#element a[href=#]')[0]; //=> DOM element object
element.select('input.cancel', 'input.submit', 'a.close'); //=> Array
element.find('input.cance,linput.submit,a.close'); //=> jQuery object
element.nextSiblings('div.item'); //=> Array
element.nextAll('div.item'); //=> jQuery object
element.previousSiblings('div.item'); //=> Array
element.prevAll('div.item'); //=> jQuery objectvar expand = function(event) {
event.element(); //=> DOM element object
event.target; //=> DOM element object
event.pointerX(); //=> absolute horizontal position for a mouse event
event.clientX; //=> absolute vertical position for a mouse event
event.pointerY(); //=> absolute horizontal position for a mouse event
event.clientY; //=> absolute vertical position for a mouse event
event.stop(); // stop bubbling
event.stopPropagation(); // stop bubbling
};
element.observe('mouseup', expand); //=> DOM element object
element.bind('mouseup', expand); //=> jQuery object
document.observe('dom:loaded', expand); //=> document object
$(document).ready(expand); //=> jQuery object
element.stopObserving('mouseup', expand); //=> DOM element object
element.unbind('mouseup', expand); //=> jQuery object
element.observe('click', expand); //=> DOM element object
element.click(expand); //=> jQuery objectelement.remove(); //=> removed DOM element object
element.remove(); //=> removed jQuery object
var img = new Element('img',{src:'/images/sample.gif',id:'my-img',alt:'img'}); //=> DOM element object
var img = $('<img src="/images/sample.gif" id="my-img" alt="img">'); //=> jQuery object
var el= new Element('a',{href:'http://firejune.com',className:'link'}).update('ClickMe!'); //=> DOM element object
var el = $('<a href="http://firejune.com" class="link">').html('ClickMe!'); //=> jQuery object
element.update('<p>hello!</p>'); //=> DOM element object
element.html('<p>hello!</p>'); //=> jQuery object
element.insert({top:img}); //=> DOM element object
element.prepend(img); //=> jQuery object
element.insert({bottom:'<p>hello!</p>'}); //=> DOM element object
element.append('<p>hello!</p>'); //=> jQuery object
element.insert({before:el}); //=> DOM element object
element.before(el); //=> jQuery object
element.insert({after:'<p>hello!</p>'}); //=> DOM element object
element.after('<p>hello!</p>'); //=> jQuery objectelement.setStyle({width: '100px'}); //=> DOM element object
element.css({width: 100}); //=> jQuery object
element.getStyle('width'); //=> '100px'
element.css('width'); //=> '100px'
element.getWidth(); //=> 100
element.width(); //=> 100
element.getHeight(); //=> 100
element.height(); //=> 100
element.hide(); //=> DOM element object
element.hide(); //=> jQuery object
element.show(); //=> DOM element object
element.show(); //=> jQuery object
element.addClassName('active'); //=> DOM element object
element.addClass('active'); //=> jQuery object
element.removeClassName('active'); //=> DOM element object
element.removeClass('active'); //=> jQuery object
element.hasClassName('active'); //=> DOM element object
element.hasClass('active'); //=> jQuery object
element.toggleClassName('active'); //=> DOM element object
element.toggleClass('active'); //=> jQuery objectelements.each((function(element, index) {
//=> DOM element object, index
});
elements.each(function(index, element) {
//=> DOM element object, index
});
elements.invoke('remove');
elements.remove();var form = $(formElement);
new Ajax.Request(form.action, {
method: form.method, paramitors: form.serialize(),
onSuccess: function(transport) {
//=> transport object(Text or JSON or XML)
},
onFailure: function(transport) {},
onComplete: function(transport) {}
});
$.ajax({
url: form.get(0).action, type: form.get(0).method, data: form.serialize(),
success: function(transport) {
//=> transport string or json object or xml node
},
error: function(transport) {},
complete: function(transport) {}
});element.fade({duration: 0.5}); // => instance of effect
element.fadeOut(500); //=> jQuery object
element.appear({duration: 0.5}); // => instance of effect
element.fadeIn(500); //=> jQuery object
element.slideUp({duration: 0.5, afterFinish: callback}); // => instance of effect
element.slideUp(500, callback); //=> jQuery object
element.slideDown({duration: 0.5, afterFinish: callback}); // => instance of effect
element.slideDown(500, callback); //=> jQuery object
element.morph({
style: 'width: 100px; height: 100px; opacity: 0.5;',
duration: 0.5,
transition: Effect.Transitions.linear,
afterFinish: callback
}); // => instance of effect
element.animate(
{width: 100, height: 100, opacity: 0.5}, // style properties
500, // duration
'linear', // easing
callback
); //=> jQuery object
Prototype.Browser.IE; //=> true or false
$.browser.msie; //=> true or false
Prototype.Browser.Webkit; //=> true or false
$.browser.safari; //=> true or false
Prototype.Browser.Gecko; //=> true or false
$.browser.mozilla; //=> true or false
Prototype.Browser.Opera; //=> true or false
$.browser.opera; //=> true or false| jquery slideshow (0) | 2012.02.29 |
|---|---|
| 20 Best jQuery Slideshow / Photo Gallery Plugins (0) | 2012.02.29 |
| Firebug의 console 파헤치기. (0) | 2011.07.19 |
| fireBug 사용법 (0) | 2011.07.19 |
| [jQuery] firebug로 디버그 (0) | 2011.07.19 |
| Prototype에서 jQuery로 옮겨타기 (0) | 2011.07.31 |
|---|---|
| Firebug의 console 파헤치기. (0) | 2011.07.19 |
| fireBug 사용법 (0) | 2011.07.19 |
| Javascript 배열 메서드 (0) | 2011.04.29 |
| [JavaScript] 이미지 파일 첨부시 업로드 이미지 미리보기 (IE8, FireFox3) (2) | 2011.04.23 |