jdpweb

all things webby

Easy jQuery Image Gallery – no plugins.

Categories: jQuery | Permalink

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);
        }
    }
});

Revamping a vertical

Categories: xhtml, html5 and css3 | Permalink

old vetical siteRevamping a vertical – fairly old Self Service Section

The “Advertise with us” section shown in the image is an old version that has since been re-vamped. I just wanted to touch on the subject of revamping a vertical, that is renewing a sites section and some of the complications associated with this as I’m sure we have or will have to do this type of work at some point or another but perhaps not quite like this?

I quickly realised that this was not going to be as straight forward as I initially thought – I was not allowed to touch the code! Did you read right? Yes you did. Read on! →

Site Grid System

Categories: xhtml, html5 and css3 | Permalink

implementing a grid systemImplementing a grid system into your existing site

Way back last year I was asked to implement a grid system by our UX guy into our many sites at Johnston Press. The reason for this was to aid in the rollout of many more verticals that were to fit into our current page layout over the next year. Read on! →