PDA

View Full Version : 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 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 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:


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

to:


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


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


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


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

and:


adiv.id='adiv'+count;

and:


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

and:


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:


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


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

seanbennington
11-01-2006, 12:38 AM
Thanks again for all of your help...you have no idea how much I appreciate all of your help. I have two last questions if you still have the time.

1st - Is there anyway I can set the div to auto-size based upon the data inside? I am accustomed to working with tables so I never have to worry. If not, I could probably figure out how many letters will fit inside the div box and then do a letter count on the string and then provide a link if the article is too long.

2nd - Sorry, I only had one question when I started, but I just thought of another. Is there a way to set up the image so that I can control its size seperate from the text? When I change the text size it shrinks the picture?

You can view what I have at www.ccc-students.com/news2.html

I really appreciate you taking the time to explain what you were doing...I like to learn as I go and am picking up tidbits here and there every chance I get.

Thanks again,
Sean

jscheuer1
11-01-2006, 07:10 AM
1 ) There are several divisions on the page, I'm not sure what you mean by 'the division'. Unless you are getting your content from an external source like - say, a database, you can setup the layout to accommodate whatever you have. Divisions can also be allowed to occupy their default width, which is 100% simply by not specifying any width value. Borders and backgrounds usually are not desirable at that point. An absolutely positioned division with width:auto will resizes to its content but, will take up no layout space and usually will need a relatively positioned container. This container can have padding or margins to simulate layout space for the absolutely positioned inner division but, at that point, you need to know the width and height anyway. Script code can measure a hidden absolutely positioned division with width:auto and use that to set the dimensions of a statically positioned division with the same content.

2 ) Which images? I think you mean the ones governed by these styles:


.gallerycontroller div img {
position:relative;
width:2em;
height:auto;
border:none;
top:2px;
}

In FF they currently will resize as the user changes font-size and if you change the font-size elsewhere in the style. In IE, only if you change the font-size elsewhere in the style. In Opera, they will resize with user changes no matter what you do. Setting the width in pixels will stop all other size changes.

seanbennington
11-01-2006, 03:41 PM
OK, I know I said only one last question last time, but somehow I messed things up and I have changed every setting I can think of and cannot get it fixed.

I somehow messed up the content controller and so now all of the story headers are showing up all in one row instead of the nice columnar display you developed for me. I tried going back in and decreasing the height and width of the controller and even though it shrunk the space, the news subject still appeared all in a row. I guess I am still trying to figure out this whole spacing thing with javascript. With tables I would always use percentages so that they would resize accordingly.

http://www.ccc-students.com/news2.html

You are correct and I guess I should have indicated that I wanted to pull news stories from a database in the beginning. That is why the sizing has become important to me as I look at using and understanding the div boxes. In the past I have stayed as far away from javascript as possible!

I can't believe I totally overlooked the div img part in the CSS and have now made the appropriate changes. Thanks for pointing that out to me.

I promise I won't bug you anymore. Your help has been greatly appreciated!

Thanks again,
Sean

jscheuer1
11-02-2006, 05:58 AM
Well, you really aren't that far off of what it was from my previous post where things worked. Why not just go back to that one and start over?

http://www.dynamicdrive.com/forums/showpost.php?p=59141&postcount=6

surfagirl8
11-16-2007, 12:14 AM
Aloha,

I have 2 questions:

1. Is it possible to place code for this script in a separate js file and simply place a call to the script on my page or do I need all the code in my head tag?

2. Can I display a photo and content at the same time in 2 different places on my web site when a link is clicked?

I want to make this work for this page: http://www.healingplanet.tv/crew.php

I'd like the user to click a Bio link and have the photo in the left column below the links change at the same time as the bio copy in the right column area of the page. Possible?

Thanks for any help!

Zhenya