...

View Full Version : Gallery Current Page Color



rettgoings
07-20-2010, 07:09 AM
So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction.

I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons.

I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value.


<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the first seventh of text.",
];


var currentMain = 0;
var currentMainT = 0;

function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
}


function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline'
document.getElementById("gallery").style.color="#ff0000";

return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">



function preloader()

{


// counter
var i = 0;


// create object
imageObj = new Image();


// set image list
images = new Array();
images[0]="../Assets/Images/pt_entry+hall2.jpg"
images[1]="../Assets/Images/pt_stair+hall.jpg"
images[2]="../Assets/Images_Revised/40_kitchen.jpg"
images[3]="../Assets/Images_Revised/40_stair.jpg"
images[4]="../Assets/Images_Revised/C_front2.jpg"
images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
images[7]="../Assets/Images_Revised/C_side.jpg"
images[8]="../Assets/Images_Revised/Y_combo.jpg"
images[9]="../Assets/Images_Revised/Y_window.jpg"
images[10]="../Assets/Images_Revised/V_stair.jpgg"


// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}



}



</script>



<div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
</td>
<td id="cell5 images">&nbsp;</td>
</tr>
<tr>
<td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>

rettgoings
07-20-2010, 04:30 PM
Im lost nevermind.

Rowsdower!
07-20-2010, 08:19 PM
You can access all anchor elements (<a>) in the gallery by using something like this:


var all_links=document.getElementById('gallery').getElementsByTagName('a');

which will end up assigning the variable "all_links" as an array of all anchor tags within the specified scope (which is the element with the id of "gallery" - so you won't get interference from other links in the page).

Here is an example you can play with to get the idea:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test Page</title>
<script type="text/javascript">
var current_position=0;
var all_links="";
function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#f00";
}
function color_me(element,color){
element.style.color=color;
}
function ShowMain(input){
}
function next(){
color_me(all_links[current_position],'#00f');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
color_me(all_links[current_position],'#f00');
}
</script>
</head>
<body onload="setTimeout('init()',50);">

<input type="button" onclick="next()" value="Highlight Next Link" />
<div id="gallery">
<a href="#" onclick="return ShowMain(0); return ShowMainT(1); setColor()">1</a
><br />
<a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><br /><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><br /><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><br /><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><br /><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><br /><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a>
</div>
</body>
</html>

Old Pedant
07-20-2010, 08:33 PM
NO NO NO!!!!

THIS IS A KILLER:


<a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a>

The keyword return means "RETURN RIGHT NOW! Do not excecute *ANY* code after this point!"

So that code has *exactly* the same effect as doing:


<a href="#" onclick="return ShowMain(1);">2</a>

STOP USING return until/unless you need it!

Thus:


<a href="#" onclick="ShowMain(1); ShowMainT(1); setColor(); return false;">2</a>

Only *after* you have done all the work you need do you do the "return false" to ensure that the <a> doesn't actually perform the HREF action.

rettgoings
07-20-2010, 09:36 PM
Thanks for the example. Rowsdower!, can you tell me why my next button is not working? Also will this also work if I select a individual <a> from the gallery?


<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the first seventh of text.",
];


var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#f00";
}

function color_me(element,color){
element.style.color=color;
}

function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
color_me(all_links[current_position],'#00f');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
color_me(all_links[current_position],'#f00');

}


function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline'

return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">


function preloader()

{


// counter
var i = 0;


// create object
imageObj = new Image();


// set image list
images = new Array();
images[0]="../Assets/Images/pt_entry+hall2.jpg"
images[1]="../Assets/Images/pt_stair+hall.jpg"
images[2]="../Assets/Images_Revised/40_kitchen.jpg"
images[3]="../Assets/Images_Revised/40_stair.jpg"
images[4]="../Assets/Images_Revised/C_front2.jpg"
images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
images[7]="../Assets/Images_Revised/C_side.jpg"
images[8]="../Assets/Images_Revised/Y_combo.jpg"
images[9]="../Assets/Images_Revised/Y_window.jpg"
images[10]="../Assets/Images_Revised/V_stair.jpgg"


// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}



}



</script>
<style type="text/css">
<!--
.style4 {color: #FF4000}
.style6 {color: #FFFFFF}
-->
</style>
</head>

<body onload="javascript:preloader(); setTimeout('init()',50);">


<div id="gallery"><a href="#" onclick="ShowMain(0); ShowMainT(0); setColor(); return false;">1</a
><a href="#" onclick="ShowMain(1); ShowMainT(1); setColor(); return false;">2</a
><a href="#" onclick="ShowMain(2); ShowMainT(2); setColor(); return false;">3</a
><a href="#" onclick="ShowMain(3); ShowMainT(3); setColor(); return false;">4</a
><a href="#" onclick="ShowMain(4); ShowMainT(4); setColor(); return false;;">5</a
><a href="#" onclick="ShowMain(5); ShowMainT(5); setColor(); return false;">6</a
><a href="#" onclick="ShowMain(6); ShowMainT(6); setColor(); return false;">7</a
></div><a href="#" onclick="Prev(); return false;"><</a
><a href="#" onclick="Next(); return false;">></a>

Rowsdower!
07-21-2010, 05:07 PM
Thanks for the example. Rowsdower!, can you tell me why my next button is not working? Also will this also work if I select a individual <a> from the gallery?

You are leaving me to guess at a great deal of your code. You need to paste your full code (the entire page between your html tags) so that I can see your functions, page structure, and whether or not the ID's you are using are present. Your code could fail for any number of reasons.

Even now I can tell you that using return ShowMainT(currentMainT-1); or anything even remotely like this will be a huge problem for this script. Don't use "return" here. Are you sure you understand what "return" does?

Anyway, post back with your full code and we'll see what can be done.

For now, this is a cobbled together example of what you seem to be trying to do:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test Page</title>
<script type="text/javascript">
//<!--
var imgList = new Array(
"http://www.google.com/intl/en_ALL/images/srpr/logo1w.png",
"http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif",
"http://www.google.com/intl/en_ALL/images/logos/video_logo_lg.gif",
"http://maps.google.com/intl/en_us/images/logos/maps_logo.gif",
"http://www.gstatic.com/news/img/logo/en_us/news.gif",
"http://www.google.com/intl/en_us/images/logos/product_search_logo_lg.gif",
"https://mail.google.com/mail/help/images/logo2.gif"
);

var clientData = new Array(
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the seventh of text."
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#f00";
ShowMain(current_position);
}

function color_me(element,color){
element.style.color=color;
}

function Prev(){
color_me(all_links[current_position],'#00f');
if((current_position-1)>-1){
current_position=current_position-1;
}
else{
current_position=(all_links.length-1);
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#f00');
}

function direct_selection(number){
all_links[current_position].style.color="#00f";
current_position=number;
ShowMain(current_position);
all_links[current_position].style.color="#f00";
}

function Next() {
color_me(all_links[current_position],'#00f');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#f00');
}

function ShowMain(which){
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline';
// return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->
</script>
<script type="text/javascript">
//<!--
function preloader(){
// counter
var i = 0;

// create object
imageObj = new Image();

// set image list
images = new Array();
images[0]="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png";
images[1]="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif";
images[2]="http://www.google.com/intl/en_ALL/images/logos/video_logo_lg.gif";
images[3]="http://maps.google.com/intl/en_us/images/logos/maps_logo.gif";
images[4]="http://www.gstatic.com/news/img/logo/en_us/news.gif";
images[5]="http://www.google.com/intl/en_us/images/logos/product_search_logo_lg.gif";
images[6]="https://mail.google.com/mail/help/images/logo2.gif";

// start preloading
for(i=0; i<=3; i++){
imageObj.src=images[i];
}
}
//-->
</script>
<style type="text/css">
.style4 {color: #FF4000}
.style6 {color: #FFFFFF}
</style>
</head>
<body onload="javascript:preloader(); setTimeout('init()',50);">
<div id="gallery">
<a href="#" onclick="direct_selection(0);return false;" style="outline:0 none;">1</a>
<a href="#" onclick="direct_selection(1);return false;" style="outline:0 none;">2</a>
<a href="#" onclick="direct_selection(2);return false;" style="outline:0 none;">3</a>
<a href="#" onclick="direct_selection(3);return false;" style="outline:0 none;">4</a>
<a href="#" onclick="direct_selection(4);return false;" style="outline:0 none;">5</a>
<a href="#" onclick="direct_selection(5);return false;" style="outline:0 none;">6</a>
<a href="#" onclick="direct_selection(6);return false;" style="outline:0 none;">7</a>
</div>
<p id="Pg" style="margin:0;padding:0;">&nbsp;</p>
<div style="min-height:100px;width:300px;border:1px solid #000;padding:5px 5px 20px 5px;position:relative;">
<img src="" id="mainImg" alt="" style="/*height:50px;width:50px;*/border:1px solid #000;display:block;float:left;height:50px;margin-right:10px;" />
<div id="mainText"></div>
<span id="Pg2" style="position:absolute;bottom:2px;right:5px;">&nbsp;</span>
<div style="position:absolute;bottom:2px;left:5px;">
<a href="#" onclick="Prev(); return false;" style="text-decoration:none;outline:0 none;">&lt;</a>
<a href="#" onclick="Next(); return false;" style="text-decoration:none;outline:0 none;">&gt;</a>
</div>
</div>
</body>
</html>

I cleaned up some of your code (but other parts are still a mess). With functions missing and crucial elements not present I had to guess at quite a bit, too, but this has the basic functionality you need and you should be able to graft this onto you project fairly easily.

rettgoings
07-22-2010, 12:20 AM
My beautiful script thanks to you guys! Here is an example: http://studio109plc.com/Photography/photography.html#


<script type="text/javascript">
//<!--
var imgList = new Array(
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
);

var clientData = new Array(
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the seventh of text."
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#ff4000";
ShowMain(current_position);
}

function color_me(element,color){
element.style.color=color;
}

function Prev(){
color_me(all_links[current_position],'#555555');
if((current_position-1)>-1){
current_position=current_position-1;
}
else{
current_position=(all_links.length-1);
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#ff4000');
}

function direct_selection(number){
all_links[current_position].style.color="#555555";
current_position=number;
ShowMain(current_position);
all_links[current_position].style.color="#ff4000";
}

function Next() {
color_me(all_links[current_position],'#555555');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#ff4000');
}

function ShowMain(which){
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');

document.getElementById("mainText").style.display = 'inline';
// return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->
</script>
<script type="text/javascript">
//<!--
function preloader(){
// counter
var i = 0;

// create object
imageObj = new Image();

// set image list
images = new Array();
images[0]="../Assets/Images_Revised/40_stair.jpg";
images[1]="../Assets/Images_Revised/40_kitchen.jpg";
images[2]="../Assets/Images_Revised/C_rear_side_combo.jpg";
images[3]="../Assets/Images_Revised/C_front2.jpg";
images[4]="../Assets/Images_Revised/C_side.jpg";
images[5]="../Assets/Images_Revised/Y_combo.jpg";
images[6]="../Assets/Images_Revised/Y_window.jpg";

// start preloading
for(i=0; i<=3; i++){
imageObj.src=images[i];
}
}
//-->
</script>


<body onload="javascript:preloader(); setTimeout('init()',50);">


<td width="175" colspan="6" rowspan="3" id="cell5 images"><img vspace="55" id="mainImg" src="" alt="" /></td>
</tr>
<tr>
<td width="350" height="336" colspan="3" id="cell3"><p>Supplementing the practice of architecture, architectural photographic services are offered.* Please contact us for additional information.</p><span id="Pg2"></span>
<div id="mainText"></div>
</td>


<div style="float:right;">
<a href="#" onclick="Prev(); return false;" style="text-decoration:none;outline:0 none;">&nbsp;&lt;</a>
<a href="#" onclick="Next(); return false;" style="text-decoration:none;outline:0 none;">&gt;</a></div>
<div id="gallery" style="float:right;">
<a href="#" onclick="direct_selection(0);return false;" style="outline:0 none;">1</a>
<a href="#" onclick="direct_selection(1);return false;" style="outline:0 none;">2</a>
<a href="#" onclick="direct_selection(2);return false;" style="outline:0 none;">3</a>
<a href="#" onclick="direct_selection(3);return false;" style="outline:0 none;">4</a>
<a href="#" onclick="direct_selection(4);return false;" style="outline:0 none;">5</a>
<a href="#" onclick="direct_selection(5);return false;" style="outline:0 none;">6</a>
<a href="#" onclick="direct_selection(6);return false;" style="outline:0 none;">7</a></div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum