I 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.

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

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