Featured Content Gallery 3

Featured Content SliderHere I continue to add a bunch of features to my Featured Content Slider. Along the way I’ll also show you how to do many neat things with JQuery.

I started by focusing on a WordPress Featured Content Plugin, but then decided to make a tool that would work on any website with Featured Content Gallery pt 2.

You should definitely check out those 2 tutorials before you proceed with this video tutorial. All of the code like always follows the video.

I’m specifically going to show you how to add an auto scroller for the featured content gallery. I’ll also teach you how to do the following with JQuery:

  • Bind click events to elements
  • Execute a function multiple times with arguments.callee
  • Grab multiple JQuery selector matches and store them in an indexed list
  • Trigger events with JQuery
  • Make changes to parent elements
  • Change multiple element attributes at once

And, much more…

Commented Code From the Video

FEATURED_CONTENT.JS

$(document).ready(function(){

 

// Make all excerpts invisible

$(‘.ntt_article_excerpt p’).css({opacity: 0.0});

 

// Show the first excerpt

$(‘.ntt_article_excerpt p:first’).animate({opacity: 1.0});

 

// Returns the first child thumbnail image location

var first_child_thumb = ($(‘.ntt_thumb_box div img’).length);

 

// This will be used to track the current featured content

var rotator_index = first_child_thumb;

 

// Dims the first child thumbnail

// You have to surround the variable with a plus

$(‘.ntt_thumb_box div:nth-child(‘+first_child_thumb+’)’).animate({opacity: 0.4});

 

$(‘.ntt_thumb_box div:nth-child(‘+first_child_thumb+’)’).addClass(‘selected’);

 

$(‘.ntt_thumbnail_frame img’).bind(‘click’, change_featured_content);

 

setInterval((function () {

rotate_images();

// arguments.callee returns the function that called the function in

// which it lies. In effect this continues to execute the setInterval

// function over and over

return arguments.callee;

})(), 4000);

 

function rotate_images()

{

 

// Grabs the image that lies in the same zero based position as the value

// of rotator_index.

var sibling_img =$(‘.ntt_thumbnail_frame:eq(‘+rotator_index+’) img’);

 

// Triggers a click event on the image so that the featured content changes

sibling_img.trigger(‘click’);

 

// Cycles through all of the available featured content available

if (rotator_index <= 0)

{

// first_child_thumb equals the total number of images available to

// cycle through

rotator_index = first_child_thumb;

}else rotator_index–;

 

}

 

function change_featured_content(e){

 

e.preventDefault(); // Prevents the link from opening the pict

 

// Set all thumbs back to defaults

$(‘.ntt_thumb_box div ‘).removeClass(‘selected’);

$(‘.ntt_thumb_box div img’).removeClass(‘selected’);

$(‘.ntt_thumb_box div ‘).animate({opacity: 1.0});

$(‘.ntt_thumb_box div img’).animate({opacity: 1.0});

 

$(this).addClass(‘selected’); // this is the item that was clicked

$(this).parent().addClass(‘selected’);

$(this).animate({opacity: 0.4});

 

var pict_title = $(this).attr(‘title’);

 

// Link destination of full size

var pict_fullsize = $(this).attr(‘src’);

 

// Cut the -60×60 addition from the file name so you get the full size // image

var photo_preview = pict_fullsize.replace(‘-60×60’, ”);

 

// Change main title above the excerpt

$(‘.ntt_article_title’).html(pict_title);

 

// Change the src value of the featured image and set its opacity to 0

$(‘.ntt_featured_pic img’).attr({

src: photo_preview,

style: ‘opacity:0.0;’

});

 

// Increase the opacity of the featured pick from 0 to 100% over a 2

// second period

$(‘.ntt_featured_pic img’).animate({opacity: 1.0}, 2000);

 

var pict_name_for_excerpt = pict_title.toLowerCase().replace(‘ ‘, ‘-‘);

 

// Makes all of the paragraph excerpts disappear

$(‘.ntt_article_excerpt p’).css({opacity: 0.0});

 

// Turns the opacity up for the paragraph associated with the same title

// as the main picture

$(‘.ntt_article_excerpt p:[title=”‘+pict_name_for_excerpt+'”]’).css({opacity: 1.0});

}

 

// This will change in upcoming versions

// It sends the browser to the featured image when that image is clicked

// In the future it will open an article, movie, or image gallery

$(‘.ntt_featured_pic img’).click(function(e) {

 

var pict_location = $(this).attr(“src”);

$(‘.ntt_featured_pic’).html(pict_location);

 

$(location).attr(‘href’,pict_location);

 

});

});

FEATURED_CONTENT.PHP

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />

<title>Website Layout</title>

<link rel=”StyleSheet” href=”style.css” />

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>

<script type=”text/javascript” src=”./js/featured_content.js”></script>

</head>

<body>

 

<div class=”ntt_featured_content”>

 

<div class=”ntt_text_div”>

 

<div class=”ntt_article_title”>

Shark

</div>

 

<div class=”ntt_horz_rule”>

</div>

 

<div class=”ntt_article_excerpt”>

 

<p title=”shark”>I thought this was such a nice picture of a shark until I got it home and realized I was reflecting in the picture. Here I come Photoshop. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

 

<p title=”polar-bear”>I got lots of nice pictures of the polar bears because they weren’t behind glass. So powerful and strong, but also cute in some ways. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

 

<p title=”penguin”>Here are the penguins all dressed up in their tuxedos. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

 

<p title=”elephant”>This is a picture I took of an elephant at the Pittsburgh zoo. This was taken during feeding time, which is pretty much all of the time. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

 

<p title=”ape”>This is a picture I took of an ape at the Pittsburgh zoo. I thought it was great that he looked so powerful.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

 

 

</div>

 

<div class=”ntt_read_more”>

<a href=”#” alt=”Article”>Read More</a>

</div>

 

</div> <!– End of ntt_text_div div –>

 

<div class=”ntt_featured_pic”>

<img src=”./images/ape.jpg” alt=”Ape” />

<img src=”./images/elephant.jpg” alt=”Elephant” />

<img src=”./images/penguin.jpg” alt=”Penguin” />

<img src=”./images/polar-bear.jpg” alt=”Polar Bear” />

<img src=”./images/shark.jpg” alt=”Shark” />

</div>

 

<div class=”ntt_thumb_box”>

 

<div class=”ntt_thumbnail_frame” >

<img src=”./images/ape-60×60.jpg” class=”ntt_featured_thumb” alt=”Ape Picture” title=”Ape” />

</div>

 

<div class=”ntt_thumbnail_frame”>

<img src=”./images/elephant-60×60.jpg” class=”ntt_featured_thumb” alt=”Elephant Picture” title=”Elephant” />

</div>

 

<div class=”ntt_thumbnail_frame”>

<img src=”./images/penguin-60×60.jpg” class=”ntt_featured_thumb” alt=”Penguin Picture” title=”Penguin” />

</div>

 

<div class=”ntt_thumbnail_frame”>

<img src=”./images/polar-bear-60×60.jpg” class=”ntt_featured_thumb” alt=”Polar Bear Picture” title=”Polar Bear” />

</div>

 

<div class=”ntt_thumbnail_frame”>

<img src=”./images/shark-60×60.jpg” class=”ntt_featured_thumb” alt=”Shark Picture” title=”Shark” />

</div>

 

</div> <!– End of ntt_thumb_box –>

 

</div> <!– End of ntt_featured_content div –>

 

</body>

</html>

STYLE.CSS

.ntt_featured_content {

position: relative;

width: 954px;

height: 326px;

// border: 2px solid #000;

}

 

.ntt_text_div {

position: relative;

width: 377px;

height: 326px;

background-image:url(‘./images/fc_text_area.png’);

}

 

.ntt_article_title {

position: absolute;

top: 40px;

left: 20px;

font: bold 24px/30px Georgia, serif;

color: #6b6a6a;

width: 315px;

height: 25px;

text-align: center;

text-shadow: #FFF 1.5px 1.5px 1px;

}

 

.ntt_horz_rule {

position: absolute;

top: 87px;

left: 20px;

height: 2px;

width: 315px;

background-color: #bebfc1;

line-height: 1px;

font-size: 1px;

}

 

.ntt_article_excerpt {

position: absolute;

top: 105px;

left: 20px;

font: 12px/17px Georgia, serif;

color: #6b6a6a;

width: 315px;

height: 120px;

}

 

.ntt_article_excerpt p{

position: absolute;

top: 0px;

left: 0px;

font: 12px/17px Georgia, serif;

color: #6b6a6a;

width: 315px;

height: 120px;

}

 

.ntt_read_more a{

position: absolute;

top: 285px;

left: 265px;

font: bold 14px/17px Helvetica, sans-serif;

color: #FFF;

text-shadow: #6b6a6a 1px 1px 0px;

text-transform:uppercase;

text-decoration: none;

}

 

.ntt_featured_pic {

position: absolute;

top:0px;

left: 378px;

width: 576px;

height: 240px;

}

 

.ntt_featured_pic img{

position: absolute;

top:0px;

left: 0px;

width: 576px;

height: 240px;

}

 

.ntt_thumb_box {

position: absolute;

top: 240px;

left: 378px;

width: 576px;

height: 86px;

background-color: #f5f5f5;

}

 

.ntt_left_button {

position: relative;

top: 36px;

left: 8px;

}

 

.ntt_thumbnail_frame {

position: relative;

float: right;

height: 58px;

width: 58px;

margin: 10px 47px 0px 0px;

background-image:url(‘./images/fc_thumb_bg.png’);

}

 

.ntt_featured_thumb {

position: relative;

top: 4px;

left: 4px;

height: 48px;

width: 48px;

}

 

.ntt_right_button {

position: relative;

top: 6px;

left: 551px;

}

3 Responses to “Featured Content Gallery 3”

  1. Rizwan Khan says:

    Great work….easily understood ……need script files…facing trouble in files which you provide in archived format…just part1 not updated

  2. Rizwan Khan says:

    Should proved source code files with each video stuff….otherwise spending so much time to linking and creating the images and other stuff ….some time work ..some time get errors

Leave a Reply

Your email address will not be published.

Google+