jdpweb

all things webby

Easy jQuery Image Gallery – no plugins.

| 1 Comment

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 &amp; 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 &amp; 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 &amp; visual entertainment</p>
</li>
</ul>

<ul>
	<li> <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />

<p class="title">Highgrove Windows</p>
&nbsp;
<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>
&nbsp;
<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">&lt;</button> <button class="next" title="next">&gt;</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 &amp; 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 &amp; 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 &amp; 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);
        }
    }
});

One Comment

  1. 457872 55060Several thanks for sharing this fine piece. Really fascinating tips! (as always, btw) 834978

Leave a Reply

Required fields are marked *.

*

* Copy This Password *

* Type Or Paste Password Here *