Featured Content Gallery Pt 2

Make Featured Content ToolIn my previous tutorial, I started creating a WordPress Featured Content Plugin. In this tutorial I’ll actually continue with the original goal while at the same time provide you with a Featured Content Gallery you can use anywhere.

Also because I’ve received many questions since I posted my JQuery Video Tutorial I’ll answer many of those here.

It should make for a jam packed tutorial.

What You’ll Learn

  • How to dynamically change multiple elements in the gallery with one click
  • How to find the number of elements in a DIV
  • How to use variable values in JQuery
  • How to change the class of an element with JQuery
  • What does this mean in JQuery
  • Numerous JQuery styling functions are covered

And, much more ….

Code From the Video

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_left_button”>

<img src=”./images/fc_left_arrow.png” alt=”Back” />

</div>

 

<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 class=”ntt_right_button”>

<img src=”./images/fc_right_arrow.png” alt=”Next” />

</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: -12px 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;

}

Featured_Content.js

$(document).ready(function(){

 

// Make all excerpts invisible

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

 

$(‘.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) – 1;

 

// 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_thumb_box div img’).click(function(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).animate({opacity: 0.4});

 

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

 

// Link destination of full size

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

 

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

 

// Change main title above the excerpt

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

 

$(‘.ntt_featured_pic img’).animate({opacity: 0.0});

$(‘.ntt_featured_pic img’).attr(“src”, photo_preview);

 

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

 

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

 

 

});

 

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

 

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

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

 

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

 

});

 

});

Leave a Reply

Your email address will not be published.

Google+