Gallery News Help

**seanbennington** · 10-26-2006, 04:17 PM

1) Script Title: Advanced Gallery Scrip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/agallery.htm

3) Describe problem: This program is great!!! I would just like to modify it a bit so that it would display hyperlinks and allow me to switch the stories by clicking on the link instead of using the select box. Seems simple enough to modify until I went in and started working with the code. If anyone could help with this I would be very grateful.

Thanks,
Sean

**jscheuer1** · 10-26-2006, 05:47 PM

Well, it depends upon just what you want to do. To start with, just change this section:

HTML Code:

<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<div id="controldiv" style="display:none" class="gallerycontroller">
<form name="gallerycontrol">

<select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select><br>

Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">

</form>
</div>

to:

HTML Code:

<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<div id="controldiv" style="display:none" class="gallerycontroller">
<form name="gallerycontrol">

<select style="display:none;" class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select><br>

Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">

</form>
<a href="#" onclick="manualcontrol(0);return false;">0</a><br>
<a href="#" onclick="manualcontrol(1);return false;">1</a><br>
<a href="#" onclick="manualcontrol(2);return false;">2</a><br>
</div>

That will leave you with the auto/manual choice and give you links. The link text can be whatever you like. The links won't work while the display is on auto. You could get rid of that part and have it always be manual by changing this:

HTML Code:

Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">

to:

HTML Code:

<div style="display:none;">Auto: <input type="radio" name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input checked type="radio" name="mode" value="manual" onClick="preparemode('manual')"></div>

**seanbennington** · 10-26-2006, 10:46 PM

Wow! Thanks so much! This is great and will certainly get me by, but how hard is it to set it up so that the news articles continue to scroll until the user clicks on a link? Also, is it possible to have the links automatically generated based upon the subject; like the select box did in the original example? Lastly, is it also possible to have the links not in action faded out?

Any additional help you could provide would be greatly appreciated!

Sean

**seanbennington** · 10-27-2006, 02:15 AM

Actually, a gentleman from another forum helped with the code and came up with this:

You can see the code in action at www.ccc-students.com/news4.asp

-------------------------------

<head>
<style type="text/css">

.gallerycontroller{
width: 250px;
background-color: #E6E6E6;
}

.gallerycontent{
width: 250px;
height: 100px;
border: 1px solid black;
background-color: white;
padding: 3px;
display: none;
font-family: arial;
font-size: 13px;

}

.disableditem {
text-decoration: none;
color: gray;
font-family: arial;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
.highlightitem {
text-decoration: none;
color: black;
font-family: arial;
font-size: 12px;
font-weight: normal;
font-style: normal;
}

</style>

<script type="text/javascript">

var tickspeed = 3000; //ticker speed in miliseconds (2000=2 seconds)

var autoshow = true; // defaule

var showdivs = new Array( );
var showlinks = new Array( );
var count = 0;
var rotator = null;

function startup( )
{
var where = document.getElementById("LIST");
var divs = document.getElementsByTagName("DIV");
for ( var d = 0; d < divs.length; ++d )
{
var dv = divs[d];
if ( dv.className == "gallerycontent" )
{
dv.onclick = rotate;

showdivs[count] = dv; // makes rotating easier

var adiv = document.createElement("DIV");
var aref = document.createElement("A");

aref.id = "ITEM" + count;
aref.href = "javascript:stopRotation(" + count + ");";
aref.className = "disableditem";

var aspan = document.createElement("SPAN");
aspan.className = "highlightitem";
aspan.innerHTML = dv.subject;

showlinks[count] = aspan;

aref.insertBefore(aspan,null);

adiv.insertBefore( aref, null );
where.insertBefore( adiv, null );
//where.insertBefore( document.createElement("BR"), null );

++count;
}
}
rotate( );
}

current = -1;

function rotate( )
{
current = ( (current+1) % count );
for ( var d = 0; d < count; ++ d )
{
showdivs[d].style.display = ( d == current ) ? "block" : "none";
showlinks[d].className = ( d == current ) ? "highlightitem" : "disableditem";
}
rotator = setTimeout( "rotate( )", tickspeed );
}

function stopRotation(acurrent)
{
if ( rotator != null ) clearTimeout( rotator );
rotator = null;
for ( var d = 0; d < count; ++ d )
{
showdivs[d].style.display = ( d == acurrent ) ? "block" : "none";
showlinks[d].className = ( d == acurrent ) ? "highlightitem" : "disableditem";
}
}
</script>
</HEAD>
<BODY onLoad="startup( );">

<div class="gallerycontent" subject="What is JavaScript?">
<img src="sean/ginger/img_0848_small.jpg" align="left" width="100" height="75">
This is my little dog named Ginger...she is so cute. What do you think?
</div>

<div class="gallerycontent" subject="Java & JavaScript Differences">
This is the window screen two. What do you think of this.
</div>

<div class="gallerycontent" subject="What is DHTML?">
This is the window screen three. What do you think??
</div>

<div class="gallerycontent" subject="Sean and Ginger">
<img src="sean/ginger/img_0850_small.jpg" align="left" width="100" height="75">
This is my little dog named Ginger number two...she is so cute. What do you think?
</div>

<div id="LIST" class="gallerycontroller">
</div>

--------------------------------------

**jscheuer1** · 10-27-2006, 05:39 AM

Pretty neat but, in Opera and FF all the links' texts are 'undefined', although they work when clicked. Probably easy to fix. I see other things about the code that grate on me but, if it works - why not?

**jscheuer1** · 10-27-2006, 06:03 AM

This version takes care of that problem. I've highlighted red the important changes, other changes made just to suit my sensibilities - the base href tag (green) is just to get the images and should be removed for actual use:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.ccc-students.com/">
<style type="text/css"> 

.gallerycontroller{ 
    width: 250px; 
    background-color: #E6E6E6;
     
    } 

.gallerycontent{ 
    width: 250px; 
    height: 100px; 
    border: 1px solid black; 
    background-color: white; 
    padding: 3px; 
    display: none; 
    font-family: arial;
    font-size: 13px; 

    } 

.disableditem { 
    text-decoration: none; 
    color: gray; 
        font-family: arial;
        font-size: 12px; 
        font-weight: normal; 
        font-style: normal; 
} 
.highlightitem { 
    text-decoration: none; 
    color: black; 
    	font-family: arial;
    	font-size: 12px; 
        font-weight: bold; 
        font-style: normal; 
} 

</style> 

<script type="text/javascript"> 

var tickspeed = 3000; //ticker speed in miliseconds (2000=2 seconds) 

var autoshow = true; // default 

var showdivs = new Array( ); 
var showlinks = new Array( ); 
var count = 0; 
var rotator = null; 

function startup( ) 
{ 
    var where = document.getElementById("LIST"); 
    var divs = document.getElementsByTagName("DIV"); 
    for ( var d = 0; d < divs.length; ++d ) 
    { 
        var dv = divs[d]; 
        if ( dv.className == "gallerycontent" ) 
        { 
            dv.onclick = rotate; 

            showdivs[count] = dv; // makes rotating easier 

        var adiv = document.createElement("div"); 
            var aref = document.createElement("a"); 

            aref.id = "ITEM" + count; 
            aref.href = "javascript:stopRotation(" + count + ");"; 
            aref.className = "disableditem"; 

            var aspan = document.createElement("span"); 
            aspan.className = "highlightitem"; 
            aspan.innerHTML = dv.title; 
	    dv.title='';
            showlinks[count] = aspan; 

            aref.insertBefore(aspan,null); 

            adiv.insertBefore( aref, null ); 
            where.insertBefore( adiv, null ); 
            //where.insertBefore( document.createElement("br"), null ); 

            ++count; 
        } 
    } 
    rotate( ); 
} 

current = -1; 

function rotate( ) 
{ 
    current = ( (current+1) % count ); 
    for ( var d = 0; d < count; ++ d ) 
    { 
        showdivs[d].style.display = ( d == current ) ? "block" : "none"; 
        showlinks[d].className = ( d == current ) ? "highlightitem" : "disableditem"; 
    } 
    rotator = setTimeout( "rotate( )", tickspeed ); 
} 

function stopRotation(acurrent) 
{ 
    if ( rotator != null ) clearTimeout( rotator ); 
    rotator = null; 
    for ( var d = 0; d < count; ++ d ) 
    { 
        showdivs[d].style.display = ( d == acurrent ) ? "block" : "none"; 
        showlinks[d].className = ( d == acurrent ) ? "highlightitem" : "disableditem"; 
    } 
} 
</script> 

</head>
<body onload="startup( );">
<div class="gallerycontent" title="What is JavaScript?"> 
    <img src="sean/ginger/img_0848_small.jpg" align="left" alt="" width="100" height="75"> 
    This is my little dog named Ginger...she is so cute.  What do you think? 
</div> 

<div class="gallerycontent" title="Java & JavaScript Differences"> 
    This is the window screen two.  What do you think of this. 
</div> 

<div class="gallerycontent" title="What is DHTML?"> 
    This is the window screen three.  What do you think?? 
</div> 

<div class="gallerycontent" title="Sean and Ginger"> 
    <img src="sean/ginger/img_0850_small.jpg" align="left" alt="" width="100" height="75"> 
    This is my little dog named Ginger number two...she is so cute.  What do you think? 
</div> 

<div id="LIST" class="gallerycontroller"> 
</div>
</body>
</html>

**seanbennington** · 10-27-2006, 02:24 PM

Thanks for helping me tweak this! I like the changes. I guess I have one last question to ask...How difficult would it be to change the links so that they are 2 per row? Also, is it difficult to set it up so that any any pictures that are in the news stories will be automatically reduced in size and located in front of the link and then have it fade out too? Maybe even just highlight the cell? The problem is that I am not sure from the code where the links are being generated and so I don't know how to make the changes. Any help you would be willing to provide would be great!

For example:

reduced Pic Hyperlink here reduced pic2 Hyperlink here

reduced pic3 Hyperlink here reduced pic4 Hyperlink here

Thanks again,
Sean

**jscheuer1** · 10-29-2006, 07:13 AM

Give this a shot:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.ccc-students.com/">
<style type="text/css">

.gallerycontroller{
width: 30.33em;
background-color: #E6E6E6;
padding-top:2px;
padding-left:4px;
}
.gallerycontroller div {
width:15em;
height:2em;
float:left;
overflow:visible;
padding-top:2px;
}
* html .gallerycontroller{
width: 455px;
}
* html .gallerycontroller div {
width:225px;
height:30px;
}
.gallerycontroller div img {
position:relative;
width:2em;
height:auto;
border:none;
top:2px;
}
.gallerycontroller div.clr {
height:0px;
overflow:hidden;
float:none;
clear:left;
padding-top:0;
}
.gallerycontent {
width: 17.66em;
height: 7.66em;
border: 1px solid black;
background-color: white;
padding: 3px;
display: none;
font-family: arial;
font-size: 13px;
margin-left:9.66em;
margin-bottom:3px;
}
.gallerycontent img {
padding:0 3px 3px 0;
}
.disableditem {
text-decoration: none;
color: gray;
font-family: arial;
font-size: 15px;
font-weight: normal;
font-style: normal;
}
.highlightitem {
text-decoration: none;
color: black;
font-family: arial;
font-size: 15px;
font-weight: normal;
font-style: normal;
}

</style>

<script type="text/javascript">

var tickspeed = 3000; //ticker speed in miliseconds (2000=2 seconds)

var showdivs = new Array( );
var showlinks = new Array( );
var count = 0;
var dc=0;
var rotator = null;

function startup( )
{
var where = document.getElementById("list");
var divs = document.getElementsByTagName("div");
for (var i_tem = 0; i_tem < divs.length; i_tem++)
if(divs[i_tem].className=="gallerycontent")
dc++;
dc=Math.ceil(dc/2);
for ( var d = 0; d < divs.length; ++d )
{
var dv = divs[d];
if ( dv.className == "gallerycontent" )
{
dv.onclick = rotate;

showdivs[count] = dv; // makes rotating easier

var adiv = document.createElement("div");
adiv.id='adiv'+count;
var aref = document.createElement("a");

aref.id = "ITEM" + count;
aref.href = "javascript:stopRotation(" + count + ");";
aref.className = "disableditem";

var aspan = document.createElement("span");
aspan.className = "highlightitem";
aspan.style.position='relative';
if (dv.getElementsByTagName('img').length>0){
var aimg = document.createElement('img');
aimg.src = dv.getElementsByTagName('img')[0].src;
aspan.style.top="-3px";
aspan.innerHTML = '&nbsp;'+dv.title;
}
else {
aspan.innerHTML = dv.title;
aspan.style.top="6px";
}
    dv.title='';
showlinks[count] = aspan;

if (dv.getElementsByTagName('img').length>0)
aref.appendChild(aimg);
aref.appendChild(aspan);
adiv.appendChild(aref);
if (count<dc||count==dc*2-1)
where.appendChild(adiv);
else
where.insertBefore(adiv,document.getElementById('adiv'+[count-dc+1]));


++count;
}
}
var clr=document.createElement('div');
clr.className='clr';
where.appendChild(clr);
rotate( );
}

current = -1;

function rotate( )
{
if ( rotator != null ) clearTimeout( rotator );
rotator = null;
current = ( (current+1) % count );
for ( var d = 0; d < count; ++ d )
{
showdivs[d].style.display = ( d == current ) ? "block" : "none";
showlinks[d].className = ( d == current ) ? "highlightitem" : "disableditem";
}
rotator = setTimeout( "rotate( )", tickspeed );
}

function stopRotation(acurrent)
{
if ( rotator != null ) clearTimeout( rotator );
rotator = null;
for ( var d = 0; d < count; ++ d )
{
showdivs[d].style.display = ( d == acurrent ) ? "block" : "none";
showlinks[d].className = ( d == acurrent ) ? "highlightitem" : "disableditem";
}
}
</script>

</head>
<body onload="startup( );">
<div class="gallerycontent" title="What is JavaScript?">
<img src="sean/ginger/img_0848_small.jpg" align="left" alt="" width="100" height="75">
This is my little dog named Ginger...she is so cute.  What do you think?
</div>

<div class="gallerycontent" title="Java & JavaScript Differences">
This is the window screen two.  What do you think of this.
</div>

<div class="gallerycontent" title="What is DHTML?">
This is the window screen three.  What do you think??
</div>

<div class="gallerycontent" title="Sean and Ginger">
<img src="sean/ginger/img_0850_small.jpg" align="left" alt="" width="100" height="75">
This is my little dog named Ginger number two...she is so cute.  What do you think?
</div>

<div id="list" class="gallerycontroller">
</div>
</body>
</html>

**seanbennington** · 10-30-2006, 01:57 AM

This is exactly what I was looking for...thank you SO very much. The only thing that is kind of weird is that when the code starts something is weird with two of the links. You can see it here at http://www.ccc-students.com/news2.html. I think that two of the links switch places or something. It seems to me that it is similar to a table not being quite big enough to hold all of the information.

Also, I was going to go in and change some of the CSS settings to fit the style of my site and I noticed that behind some of the height and width settings ended in "em". What does that stand for? I noticed that when I tried to change some of them the results were different than what I expected.

Thanks again,
Sean

**jscheuer1** · 10-30-2006, 07:33 AM

OK, well I actually did it a little differently than what you asked for. Instead of:

link1 link2
link3 link4
link5 link6

I did:

link1 link4
link2 link5
link3 link6

I think this looks better to the eye as we all are more used, in situations where all data is of equal importance, to going down one column then the down the next. You can get the organization in the first diagram by removing some of the code:

Code:

for (var i_tem = 0; i_tem < divs.length; i_tem++)
if(divs[i_tem].className=="gallerycontent")
dc++;
dc=Math.ceil(dc/2);

and:

Code:

adiv.id='adiv'+count;

and:

Code:

if (count<dc||count==dc*2-1)

and:

Code:

else
where.insertBefore(adiv,document.getElementById('adiv'+[count-dc+1]));

Now, em's are a unit of length based upon font size. In most browsers, when a user resizes text (even text whose size is set in pixels), it will (when being made larger) overflow a container that has its dimensions set in pixels. In IE if text and dimensions are both set in pixels, neither will resize when the user attempts to change text size using the view menu.

I simply worked things out so that in FF and IE, things would look OK at most common user selectable text sizes. In Opera, resizing text actually zooms in or out everything on a page, so there is no problem there. Just about every other browser does it like FF.

Since the font sizes are set in pixels, I used this section to set dimensions in pixels for IE:

Code:

* html .gallerycontroller{
width: 455px;
}
* html .gallerycontroller div {
width:225px;
height:30px;
}

Only IE will follow these rules. All others will use the em dimensions which will either not matter (in Opera) or allow them to resize the containers along with the text, in IE no resizing will occur with this setup as all its dimensions as well as the text sizes are set in pixels (except for the .gallerycontent division, which IE saw fit not to resize anyway).

If you want to play with these values (em dimensions change as the font size they contain change), best to get FF to see the effects upon text resizing or forget about that, get rid of:

Code:

* html .gallerycontroller{
width: 455px;
}
* html .gallerycontroller div {
width:225px;
height:30px;
}

and set everything in pixels. This will not look good under certain circumstances in FF and some other browsers but, will be OK in most cases.

One final caution though, having nothing to do with ems. If the size of the containers in the control section:

.gallerycontroller

and:

.gallerycontroller div

isn't big enough to accommodate the text inside them, things will get odd in any browser.

Thread: Gallery News Help

Thread Tools

Search Thread

Gallery News Help

Works Great!

Got it

Thanks!

Awesome!

Bookmarks

Bookmarks

Posting Permissions