Blogger Bits

25 BEST jQuery Slider/Image Gallery Plugins and Tutorials

admin — Thu, 21 Oct 2010 15:50:51 +0000

jQuery is a free, open-source, lightweight JavaScript library which is designed to simplify the client-side scripting of HTML. jQuery has overpowered the use of Flash in modern web design because of its lesser size, faster load time and isn’t very hard to understand. Lately, a lot of websites are making use of jQuery powered image slide shows/sliders as it is an excellent way to promote their featured posts or images to the readers.

So, here I’ve made a roundup of 25 Best & Latest jQuery Image Gallery/Slider Plugins and Tutorials. I hope it would be very helpful to you if you’re interested in implementing a content slider in your website/blog too!

1. Piecemaker XML Gallery

2. Supersized

3. Floom

4. Looped Slider

5. Image Flow

6. jCoverflip

7. Smooth Div Scroll

8. CU3ER Image Slider

9. Popeye

10. AviaSlider

11. jqFancy Transitions

12. Pikachoose

13. AD Gallery

14. jQuery Morphing Gallery

15. How to Create a Simple iTunes-like Slider?

16. The Lof JSliderNews Plugin

17. Advanced jQuery background image slideshow

18. Making a Mosaic Slideshow With jQuery & CSS

19. The Mootool – Lof SiderNews Plugin

20. Rotating Billboard System with jQuery and CSS

21. YoxView

22. Carousel WordPress Plugin

23. Cycle

24. jQueryGlobe – jQuery Plugin

25. Create a Custom jQuery Image Gallery with jCarousel

I may have missed some other great content or image sliders in this compilation. Please do not hesitate to share with us in the comments so that we can add it/them instantly.

Update:

26. Nivo Slider

Carbon 12 | Free Premium Blogger Template

admin — Tue, 05 Oct 2010 12:12:24 +0000

Once again, I’m here with another free premium Blogger template, Carbon 12. The template was named after the most abundant isotope (¹²C) of element Carbon. “Carbon 12″ is a template with dark background, right sidebar, and fixed width. It is a fast-loading template which uses no graphics or images (except for the icons). All the effects such as the rounded corners, box shadow,text shadow and more were achieved using CSS3 techniques.

Screenshot:

Here are some unique features of this template:

Fast loading template (tested using only three widgets shown in the demo)
Two navigation bars
Stylish social share icons at the bottom of post
Stylish post header
Post image thumbnail

This template is best viewed in CSS3 supporting browsers.

Template Settings

1. Top Navigation Bar


            
	        Home
		Posts RSS
		Comments RSS
		Edit

2. Bottom Navigation Bar

	
            
	        Category 1
		Category 2
		Category 3
		Edit

3. Post date

Go to Design > Page Elements > Click on the ‘edit‘ button inside the ‘Blog Posts‘ widget. There, set the time format to DD/MM/YY in numbers (10.10.10).

4. Post thumbnails

You have to add a class=”thumbnail” to the tag in the post editor. The thumbnail image should have a width and height of 200px.

Dimenzion Free Premium Blogger Template

admin — Thu, 23 Sep 2010 17:24:33 +0000

Dimenzion is a mini magazine wordpress theme created by Simplywp.net. I’ve converted it into a blogger template. According to the original author, Dimenzion wordpress theme was designed with dimensional view in mind and combination of yellow tangerine, brown, light teal as color scheme.

Screenshot:

Features:

- Feature Posts slider
- Auto posts thumbnail generated
- Auto excerpt posts
- Twitter account button ready
- Popular Social bookmark ready in posts
- Related Post ready ( thanks to Bloggerplugins.org )
- 3 column footer
- Custom font for Blog Title

Template Settings

1. Twitter and RSS buttons


Twitter
RSS Feed

2. Featured Content Slider






Alice in Wonderland Movie Poster

Alice in Wonderland is an upcoming fantasy-adventure film directed by Tim Burton. It is an extension to the Lewis Carroll novels Alice’s Adventures in Wonderland and Through the Looking-Glass. The film will use a [...]






Megan Fox in Jennifer’s Body

Jennifer’s Body is a 2009 black comedy horror film written by Diablo Cody and directed by Karyn Kusama. The film stars Megan Fox, Amanda Seyfried, Adam Brody and Johnny Simmons and portrays a newly [...]






Sherlock Holmes Nominated for Golden Globe


Sherlock Holmes is a 2009 film adaptation of Arthur Conan Doyle’s fictional character of the same name. The film was directed by Guy Ritchie and produced by Joel Silver, Lionel Wigram, Susan [...]






The Imaginarium of Doctor Parnassus

The Imaginarium of Doctor Parnassus is a 2009 fantasy film directed by Terry Gilliam and written by Gilliam and Charles McKeown. The film follows the leader of a travelling theatre troupe who, having made a deal [...]







Alice in Wonderland Movie Poster
Megan Fox in Jennifer’s Body
Sherlock Holmes Nominated for Golden Globe
The Imaginarium of Doctor Parnassus

3. Navigation Menu


Home
About
Contact
Edit

35+ Excellent CSS and jQuery-based Navigation Menu Tutorials and Techniques Collection

admin — Wed, 22 Sep 2010 06:32:23 +0000

Navigation menu is the most vital element in web design. It guides users to navigate around your blog/website and able to find needed information easily.

Here, I’ve made an ultimate collection containing 38 jQuery and CSS navigation menu tutorials and techniques which you can implement into your blog/website. Some of them made up of pure CSS3 without involving any javascripts.

CSS3 Dropdown Menu

Mega Drop Down Menus w/ CSS & jQuery

Apple style menu and improved with jQuery

Halftone Navigation Menu With jQuery & CSS3

Animated Navigation with CSS & jQuery

jQuery style menu with CSS3

Horizontal Subnav with CSS

Fancy Apple-Style Icon Slide Out Navigation

CSS3 Minimalistic Navigation Menu

Slick Menu using CSS3

CSS Based Navigation

Advanced CSS Menu

OS X dock of icons with CSS

Fancy menu using CSS3 and jQuery

Grungy Random Rotation Menu with jQuery and CSS3

Sleek Pointer Menu 2

CSS3 Chunky Menu

Sexy Drop Down Menu w/ jQuery & CSS

CSS3-only horizontal drop line tab menu

Thick Underline Menu

RocketBar Navigation Menu

Animated Drop Down Menu with jQuery

Simple CSS vertical menu Digg-like

Designing the Digg Header

A CSS3 Navigation Menu

Apple Navigation Bar Using Only CSS

Sliding Jquery Menu

Navigation bar with tabs using CSS and sliding doors effect

A Different Top Navigation

Nested Side Bar Menu

The Fanciest Dropdown Menu You Ever Saw

Fun Animated Navigation Menu With Pure CSS

MenuMatic

CSS Sliding Door using only 1 image

Create Vimeo-like top navigation

Digg-like navigation bar using CSS

Symphonic | Free Blogger Template

admin — Sun, 19 Sep 2010 08:16:00 +0000

Symphonic is a unique CSS template by freecsstemplates.org. It is a fixed width, right sidebar, purple, clean and simple template which is suitable for personal blogs. Less images are used in this cool template.

Screenshot of the template

Editing Instructions

1. Navigation bar

Spanning | Free Blogger Tempate

admin — Thu, 16 Sep 2010 16:20:55 +0000

Spanning is a free lightweight CSS template by freecsstemplates.org. I’ve converted it into a blogger template. It is a minimal and fast loading template with no images involved.

Spanning blogger template comes with a gallery where you can show your photos as a slideshow to your blog readers. The gallery is only visible in home page. It is powered by Gallerax (a jQuery plugin by NodeThirtyThree). You’re free to use/modify this template as you wish for anything as long as you link back to our site.

Editing Instructions

1. Navigation bar

        
		
		    Home
		    Products
		    About
		    Contact

2. Gallery


    
	
		
                    
			 Post Title Post Description

You can change the image title and description by editing the text within the title=’ … ‘. Image title is followed by the description separated by a colon ; . For example, Grilled Shrimp is the image title and A nicely grilled shrimp is the description.

Replace the default image source with your photo URL. They will be cropped automatically and used as the thumbnails below the captions box.

Blueyo | Free Blogger Template

admin — Mon, 13 Sep 2010 06:44:36 +0000

Blueyo is another free HTML template which was originally designed by Jesper from jayj.dk. I’ve converted it into Blogger template.

It is a professional-looking blogger template with right sidebar, ad slots ready, social icons (Twitter, RSS, Subscribe) ready and more. This template is cross-browser compatible.

Editing Instructions

1. Social buttons

2. Navigation Menu



 Home
 About
 Contact

3. Ad slots

Ads

4. Post thumbnails

You have to add a class=”alignleft” to the tag in the post editor. The thumbnail image should have a width and height of 200px.

Floral Glow | Free Blogger Template

admin — Thu, 09 Sep 2010 16:30:59 +0000

Floral Glow is a free blogger template created by me. It is a 2 columns, abstract, floral, glowing, black, and right sidebar template with custom navigation menu. I’ve used a lot of CSS3 features in this template such as border-radius, transform, box shadow, RGBA colour, transition effects, text shadow and more.

The menu links, sidebar, posts, and comments are leaf-shaped (made with css3) which suit the name of this template, Floral Glow. Use Webkit browsers like Safari and Chrome to view the transition effect of menu links. They glow and zoom in when hovered.

Editing Instructions

Navigation Menu



 Home
 About
 Photos
 RSS Feed
 Contact
 Edit

Add Animated Image Captions on Hover with CSS3 (No Javascript)

admin — Wed, 08 Sep 2010 07:23:59 +0000

We have been using Javascripts to add animated captions on hover for images before this. But, inspired by Wibiya’s toolbar Smart Share for post images, I managed to create almost the same effect using CSS3 without using any Javascripts. This effect can be used by both WordPress and Blogger users. The transition effect of the caption only visible in Webkit browser like Google Chrome.

Vineyard Lane, Spring
This shot was taken by Patrick Smith in Napa Valley California.

Image credits to Patrick Smith Photography

For Blogger Users

1. Go to ‘Edit HTML‘ and search for ]]> tag using CTRL + L.

2. Add the following CSS code, immediately before the ]]> tag and ‘Save‘.


/* Post images with CSS animated captions by Blogger Bits */

#post-image {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

3. To apply this effect to your images in the post, add the following code to your Post Editor in HTML mode. Replace the ‘#‘ with your image source URL.



 
 
 
 Image Title here
 Image description goes here.

For WordPress Users

Go to Appearance > Editor > Stylesheet (style.css). Copy and paste the same CSS code and ‘Save’. To apply this effect to your images in the post, add the same code shown in instructions for Blogger users into your Post Editor in HTML mode.

That’s all. If you have any questions or problem, please do not ‘think twice’ to contact me via form or comments.

Cloudy Sky | Free Blogger Template

admin — Tue, 07 Sep 2010 00:49:35 +0000

Today, I’m releasing another great free blogger template, Cloudy Sky. It is a simple template with minimal design, clean, inspiring, fluid, right sidebar, and carefully coded. This template uses a lot of CSS3 features like box shadow, border radius, linear gradient and more.

Editing Instructions

1. Navigation Menu



 Home
 Posts RSS
 Comments RSS
 Edit