Easy jQuery Image Gallery – no plugins.
Easy jQuery Image Gallery – no plugins
I had to develop a new slot to show adverts in that rotated onClick – an easy jQuery image gallery. The existing one used plugis and was slowing the site down, so I went to work.
Here is the jsFiddle: http://jsfiddle.net/jambo/eU3jk/13/
The Html – 1 horizontal and 1 vertical unordered list. This rotates 3 images in view one by one on click with a transition.
<div class="smartAd">
<ul class="smartH">
<ul class="smartH">
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">First Hampshire Rose</p>
<p class="text">For great value food with friends</p>
</li>
</ul>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">Nara Sushi Restaurant</p>
<p class="text">Healthy & appetising food</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Alexandra Sports</p>
<p class="text">Running & fitness retailers</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">Blades Barbers</p>
<p class="text">£10 off Intensive Muscle Release</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Aerial Connections</p>
<p class="text">Audio & visual entertainment</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Highgrove Windows</p>
<p class="text">10yr guarantee as standard</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">seven</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">eight</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">nine</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">Last</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<div class="nav"><button class="prev" title="previous"><</button> <button class="next" title="next">></button></div>
</div>
<div class="smartAdV">
<ul class="smartV">
<ul class="smartV">
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">First Hampshire Rose</p>
<p class="text">For great value food with friends</p>
</li>
</ul>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">Nara Sushi Restaurant</p>
<p class="text">Healthy & appetising food</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Alexandra Sports</p>
<p class="text">Running & fitness retailers</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">Blades Barbers</p>
<p class="text">£10 off Intensive Muscle Release</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Aerial Connections</p>
<p class="text">Audio & visual entertainment</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
<p class="title">Highgrove Windows</p>
<p class="text">10yr guarantee as standard</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">seven</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">eight</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">nine</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<ul>
<li> <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
<p class="title">Last</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</li>
</ul>
<div class="nav"><span class="wrap"> <button class="next" title="next">v</button> <button class="prev" title="previous">^</button> </span></div>
</div>
The CSS
/* jamie paterson */
/* start horizontal */
.smartAd {
float:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
width:627px; overflow:hidden;
}
.smartH {
width:10000px; position:relative; float:left;
height: 80px; padding: 0; margin:0;
font-family: arial;
background: #fff;
}
.smartH img, .smartV img{
float: left;
width: 100px; height: 70px;
border: none;
}
.smartH .title{
float: right;
margin: 0 0 0 5px; width:100px;
font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartH .text{
float: right;
margin: 5px 5px 0; width:95px;
font-size: 12px; color: #000; line-height: 1.1; text-align: left;
}
.smartH a, .smartV a{
float: left;
text-decoration: none; cursor:pointer;
}
.smartH li {
display: inline-block; float:left;
width:205px; margin:0 4px 0 0; height: 70px; padding: 5px 0;
}
.smartAd .nav {
float: right;
width:33px; margin: 10px 0 0;
}
button{
border: none; cursor: pointer;
background-image:url("images/carousel-arrows.gif");
}
.prev{
float: left;
width:16px; height:16px; margin: 0 1px 0 0;
background-position: 0 16px;
}
.next{
float: right;
width:16px; height:16px;
background-position: 0 0;
}
/* end Horizontal Style */
/* start Vertical style */
.smartAdV {
float:left; clear:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
height:616px; padding: 0 10px; overflow:hidden;
}
.smartV {
width:100px; position:relative; float:left;
height: 10000px; padding: 0; margin:0;
font-family: arial;
background: #ebebeb;
}
.smartV .title{
float: left;
margin: 8px 0; width:100px;
font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartV .text{
float: right;
margin: 5px 0 10px; width:100px;
font-size: 12px; color: #000; line-height: 1.4; text-align: left;
}
.smartV li {
display: inline-block; float:left;
width:100px; margin:0 0 8px; height: 180px; padding: 10px 0 0;
border-top: 1px solid #ebebeb; border-bottom:1px solid #ebebeb;
background: #fff;
}
.smartAdV .nav {
float: left; position:relative; left:-100px; bottom: -600px;
width:100px; margin: 0;
background:#fff;
}
.smartAdV .wrap{
float: right;
width:33px;
}
.smartAdV .prev{
float: left;
width:16px; height:16px; margin: 0 1px 0 0;
background-position: 16px 0;
}
.smartAdV .next{
float: right;
width:16px; height:16px;
background-position: 16px 16px;
} The jQuery – this is all of it! Just link to the version of jQuery you want – no plugins remember!.
$( function () {
//adding classes via jQuery instead of direct for ease - some of these variables not used as var's
var currentElement = $(".smartH li:first"); // sets first current horiz
var lastElementThree = $(".smartH").children("li").eq(-3).addClass("lastThird"); //horiz
var firstElementOne = $(".smartH").children("li").eq(0).addClass("firstOne"); //horiz
var currentElementV = $(".smartV li:first"); // sets first current vert
var lastElementThreeV = $(".smartV").children("li").eq(-3).addClass("lastThirdV"); //vertical
var firstElementOneV = $(".smartV").children("li").eq(0).addClass("firstOneV"); //vertical
var prevBtn = $(".smartAd .prev, .smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 }); // hide but show on scroll
// HORIZONTAL section
$(".smartAd .prev").click(function () {
currentElement = currentElement.prev();
scrollTo(currentElement);
$(currentElement).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
$(".smartAd .next").prop('disabled', false).css({ opacity: 1.0 });
$(".smartH").stop().animate({
left: "+=209px" // block li's are white space dependent
}, 500 );
e.preventDefault();
});
$(".smartAd .next").click(function () {
currentElement = currentElement.next();
scrollTo(currentElement);
$(currentElement).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
$(".smartAd .prev").prop('disabled', false).css({ opacity: 1.0 });
$(".smartH").stop().animate({
left: "-=209px" // block li's are white space dependent
}, 500 );
e.preventDefault();
});
// VERTICAL section
$(".smartAdV .prev").click(function () {
currentElementV = currentElementV.prev();
scrollTo(currentElementV);
$(currentElementV).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
$(".smartAdV .next").prop('disabled', false).css({ opacity: 1.0 });
$(".smartV").stop().animate({
top: "+=200px" // block li's are white space dependent if not floated
}, 500 );
e.preventDefault();
});
$(".smartAdV .next").click(function () {
currentElementV = currentElementV.next();
scrollTo(currentElementV);
$(currentElementV).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
$(".smartAdV .prev").prop('disabled', false).css({ opacity: 1.0 });
$(".smartV").stop().animate({
top: "-=200px" // block li's are white space dependent if not floated
}, 500 );
e.preventDefault();
});
function scrollTo(element) { // includes/combined horiz and vert - left action and top action respectively
if ($(currentElement).hasClass("lastThird")){
$(".smartAd .next").prop('disabled', true).css({ opacity: 0.5 });
$(window).scrollLeft(element.position().left);
}
else if ($(currentElement).hasClass("firstOne")){
$(".smartAd .prev").prop('disabled', true).css({ opacity: 0.5 });
$(window).scrollLeft(element.position().left);
}
else{
$(window).scrollLeft(element.position().left);
}
if ($(currentElementV).hasClass("lastThirdV")){ // vert
$(".smartAdV .next").prop('disabled', true).css({ opacity: 0.5 });
$(currentElementV).children().scrollTop(element.position().top);
}
else if ($(currentElementV).hasClass("firstOneV")){ // vert
$(".smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 });
$(currentElementV).children().scrollTop(element.position().top);
}
else{ // vert
$(currentElementV).children().scrollTop(element.position().top);
}
}
});
Simple jQuery image carousel for our Findit section