Make Featured Content Gallery Pt 4

Make Featured Content GalleryI continue to show you how to make a Content Gallery in this tutorial. I’ll focus on how to allow for multiple blocks of content in this tutorial and how to set up arrows to cycle through that content.

This tutorial was ment to originally create a WordPress specific Featured Content, but now it will work on any type of site.

If you missed the previous parts check out WordPress Featured Content and all of the other parts that proceed this one.

Like before I’m also going to teach you how to do some really cool things with JQuery:

  • Grab content dynamically from files
  • Place content from files into the web page dynamically
  • Create functions that execute numerous times
  • Change functionality dynamically based on numerous conditions

And, an insane amount more! Remember this isn’t the end. I still have to add a light box feature and then have everything work as a WordPress Plugin!

The code follows the video 🙂

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> <!– End of ntt_article_excerpt 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 class=”ntt_left_button”>

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

</div>

 

<div class=”ntt_right_button”>

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

</div>

 

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

 

</body>

</html>

 

FEATURED_CONTENT.JS

$(document).ready(function(){

 

// Define the number of featured content pages

var ntt_num_featured_pages = 3;

var ntt_post_content_html1 = ”;

var ntt_post_content_html2 = ”;

var ntt_post_content_html3 = ”;

 

// Go get all of the content that is going to be used

get_featured_content(ntt_num_featured_pages);

 

// 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;

 

// This will hold the id for function calls to setInterval

// When I make a new setInterval call it will be used to delete

// the older one

var ntt_set_interval_id = ”;

 

// Holds the value of the current featured content on screen

// I set it up to hold either the values of 1,2, or 3

// You can see this in use in the function grab_next_feat_content

var featured_content_being_shown = 1;

 

// Call the function that will setup all of the default styling

ntt_setup_featured_content();

 

// Changes all of the content in the featured content tool when the next

// arrow is clicked

function grab_next_feat_content()

{

if (featured_content_being_shown == 1)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html2);

featured_content_being_shown = 2;

}

else if (featured_content_being_shown == 2)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html3);

featured_content_being_shown = 3;

}

else if (featured_content_being_shown == 3)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html1);

featured_content_being_shown = 1;

}

 

 

// Eliminate the previously set setInterval() call

// If this isn’t done you will have multiple timers which isn’t fun

clearInterval(ntt_set_interval_id);

 

rotator_index = first_child_thumb;

 

// Call the function that provides the default styling

ntt_setup_featured_content();

 

}

 

// Changes all of the content in the featured content tool when the previous

// arrow is clicked

function grab_last_feat_content()

{

 

if (featured_content_being_shown == 1)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html3);

featured_content_being_shown = 3;

}

else if (featured_content_being_shown == 2)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html1);

featured_content_being_shown = 1;

}

else if (featured_content_being_shown == 3)

{

// Copy the featured content stored in another file to the page

$(‘.ntt_featured_content’).html(ntt_post_content_html2);

featured_content_being_shown = 2;

}

 

// Eliminate the previously set setInterval() call

// If this isn’t done you will have multiple timers which isn’t fun

clearInterval(ntt_set_interval_id);

 

// Set the featured content to the first thumb and everything else

rotator_index = first_child_thumb;

 

// Call the function that provides the default styling

ntt_setup_featured_content();

 

}

 

function ntt_setup_featured_content()

{

 

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

 

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

 

ntt_set_interval_id = 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);

 

// Bind the arrows so that when clicked they grab the new content

$(‘.ntt_right_button img’).bind(‘click’, grab_next_feat_content);

$(‘.ntt_left_button img’).bind(‘click’, grab_last_feat_content);

 

// If there is only one set of featured content don’t show arrows

// Also remove their click events

if (ntt_num_featured_pages == 1)

{

 

$(‘.ntt_right_button img’).css({opacity: 0.0});

$(‘.ntt_left_button img’).css({opacity: 0.0});

$(‘.ntt_right_button img’).unbind(‘click’);

$(‘.ntt_left_button img’).unbind(‘click’);

 

}

 

}

 

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

}

 

// Grabs all of the data stored in outside files and saves that information

// to a variable for use when the arrows are clicked on

function get_featured_content(ntt_num_content_blocks)

{

if (ntt_num_content_blocks == 2)

{

$.get(“featured_data1.txt”, function(data){

ntt_post_content_html1 = data;

});

 

$.get(“featured_data2.txt”, function(data){

ntt_post_content_html2 = data;

});

 

} else if (ntt_num_content_blocks == 3)

{

$.get(“featured_data1.txt”, function(data){

ntt_post_content_html1 = data;

});

 

$.get(“featured_data2.txt”, function(data){

ntt_post_content_html2 = data;

});

 

$.get(“featured_data3.txt”, function(data){

ntt_post_content_html3 = data;

});

 

} else {

$.get(“featured_data1.txt”, function(data){

ntt_post_content_html1 = data;

});

}

}

 

 

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

 

});

 

});


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_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_left_button {

position: absolute;

top: 267px;

left: 392px;

}

 

.ntt_right_button {

position: absolute;

top: 267px;

left: 925px;

}

 

.ntt_left_button img:hover{

opacity: 0.6;

}

 

.ntt_right_button img:hover{

opacity: 0.6;

}


FEATURED_DATA1.TXT

<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> <!– End of ntt_article_excerpt 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 class=”ntt_left_button”>

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

</div>

 

<div class=”ntt_right_button”>

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

</div>

 

FEATURED_DATA2.TXT

<div class=”ntt_text_div”>

 

<div class=”ntt_article_title”>

Beaver

</div>

 

<div class=”ntt_horz_rule”>

</div>

 

<div class=”ntt_article_excerpt”>

 

<p title=”beaver”>This is a nice picture of a beaver. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

 

<p title=”fish-tank”>Here is a nice picture of a fish tank. 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=”flamingo”>Here is a pretty pink flamingo. 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=”gazelle”>This is a picture I took of some gazelles. 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=”giraffe”>This is a picture I took of a giraffe at the Pittsburgh zoo. 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/giraffe.jpg” alt=”Giraffe” />

<img src=”./images/gazelle.jpg” alt=”Gazelle” />

<img src=”./images/flamingo.jpg” alt=”Flamingo” />

<img src=”./images/fish-tank.jpg” alt=”Fish Tank” />

<img src=”./images/beaver.jpg” alt=”Beaver” />

</div>

 

<div class=”ntt_thumb_box”>

 

<div class=”ntt_thumbnail_frame” >

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

</div>

 

<div class=”ntt_thumbnail_frame”>

<img src=”./images/fish-tank-60×60.jpg” class=”ntt_featured_thumb” alt=”Fish Tank Picture” title=”Fish Tank” />

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

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

 

<div class=”ntt_left_button”>

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

</div>

 

<div class=”ntt_right_button”>

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

</div>

 

FEATURED_DATA3.TXT

<div class=”ntt_text_div”>

 

<div class=”ntt_article_title”>

Kangaroo

</div>

 

<div class=”ntt_horz_rule”>

</div>

 

<div class=”ntt_article_excerpt”>

 

<p title=”kangaroo”>This is a nice picture of a kangaroo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

 

<p title=”monkey”>Here is a nice picture of a monkey. 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=”peacock”>Here is a pretty peacock. 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=”python”>This is a picture I took of some pythons. 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=”turtle”>This is a picture I took of a turtle at the Pittsburgh zoo. 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/turtle.jpg” alt=”Turtle” />

<img src=”./images/python.jpg” alt=”Python” />

<img src=”./images/peacock.jpg” alt=”Peacock” />

<img src=”./images/monkey.jpg” alt=”Monkey” />

<img src=”./images/kangaroo.jpg” alt=”Kangaroo” />

</div>

 

<div class=”ntt_thumb_box”>

 

<div class=”ntt_thumbnail_frame” >

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

<div class=”ntt_thumbnail_frame”>

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

</div>

 

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

 

<div class=”ntt_left_button”>

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

</div>

 

<div class=”ntt_right_button”>

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

</div>


4 Responses to “Make Featured Content Gallery Pt 4”

  1. Ahmad says:

    it is fantastic tut.. I learned a lot from you! Thanx

  2. gorants says:

    hello sir ,

    how to implement Twitter-Like “Load More” Widget with java technologies.

    appreciate your guidance on this.

Leave a Reply

Your email address will not be published.

Google+