Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Gallery News Help

  1. #1
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Gallery News Help

    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
    Last edited by seanbennington; 10-26-2006 at 04:42 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Works Great!

    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

  4. #4
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Got it

    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>

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks!

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Awesome!

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •