Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

5/2/13

Free jQuery Carousel Plugins

5/02/2013 12:40:00 PM  Jhonas Loss  No comments


The best thing about these  jQuery Carousel is the fact that most of the times you don’t have to create them from scratch – thanks to all the free jQuery Carousel Plugins available out there.  There are huge amount of jQuery sliders available and it can be a challenge to select plugins.  I am sure, this list of jquery carousels definitely helpful to get started.

Slides Js

Slides-Js
SlidesJS is a responsive slideshow plug-in for jQuery with features like touch and CSS3 transitions.

Agile Carousel JQuery plugin

Agile-Carousel
Agile Carousel is fully customizable which can easily build to your requirements. It implements your slides with the Agile Carousel jQuery Plugin.

Barousel

Barousel
It is an amazing jQuery plugin that simply generate carousels. It shows each slide with image plus related content.

Wow Slider

Wow-Slider
WOW Slider is a responsive jQuery image slider with amazing visual effects and tons of professionally made templates.

Responsive jQuery Content Slider

Responsive-jQuery-Content-Slider
It is fully responsive – will adapt to any device. Slides can contain images,video and html content in Horizontal, vertical, and fade modes. It uses CSS transition and supported all browser.

Carou FredSel

Carou-FredSel
jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.

jCoverflip

jCoverFlip
It is free elegant plugin that use for featured content. it easily customization and flexible integration.

jQuery Infinite Carousel Plugin

jQuery Infinite Carousel Plugin
The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion.

jCarousel Lite

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content.

ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN

ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.

Read More

3/13/13

Add Page Peel effect with jQuery & CSS to Blogger

3/13/2013 01:20:00 PM  Jhonas Loss  No comments


You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.







Click the link below to view demo

View Demo
Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
  • Copy the below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Add Page Peel Effect To Blogger Blog 

Step 2 : 
  • Go to Design->Edit HTML
  • Copy and paste the below code above </head>
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEcFkAPBhsd1B2wztf1mIp4EUMs2Aqph-pRbd93YtntuP9Tk8YKr6_iKQ8R6wtI2vKpJPs93bvefse50e8sylrQx7Cqs9dxynLOfNgUYn3ozbwPU9KmovzSLZg-eJa0Zyk-O8kR_NlGk/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJPt6GoWl82p1qMh48cGv_Lj1_DAytDTpQiZsDIA0MifA19sR8R1l1eTptcUH7FDR6gEh0-UO0rXaD3CtYT4Gz_jUxwdpBY6M5soMBKU6yDGX04AYtDxpk2t4gb4B5p07rmNJgDPJEl8/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
    .animate({
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
$(&quot;.back-img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
});
});
</script>
Step 3:
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtk2WYR_H1pI3f0vJWSHXIBKDcN7dk5POHRn1Nh5jxXFrRFdomX-bpZ1WShSNWYODptHwe-fNhzHvB8hLHxQcNEqAcUrbRj6caubOruJRNXu1Yha4U4LxV_4eWKhlg9BXZKB25hSqpfsnG/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement
  •  Save the Template NetOopsblog protected image

Read More
Related Posts Plugin for WordPress, Blogger...