SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add text to content slider

    Hi everyone,
    I've been trying to create some kind of a content slider similar to the one on this website: http://www.kcrw.com/

    If you look on the right side you will see a "Coming to KCRW" content box. When you click on any of the image thumbnails, both the enlarged image and text dynamically change. I want something like that to happen.

    I slightly "tweaked" an existing script from a free JavaScript website. I am aware that there are probably better ways to do what I'm trying to do, however this is for a work-related site and unfortunately not all JavaScripts work on the CMS system (yes it sucks and too bad because we're stuck with it for awhile). This particular code that I'm using seems to work so I'm sticking with it.

    Currently the images are working fine, but I can't seem to get some text to appear at the bottom of each enlarged image and then make both of the enlarge image and text change depending on which thumbnail image I click on.

    Please help me out! Any help is appreciated!

    Here is my current code:
    Code:
    <script type="text/javascript">
    
    /*Multi image slideshow script- by javascriptkit.com
    Visit JavaScript Kit (http://javascriptkit.com) for script
    Credit must stay intact for use*/
    
    //#1 SPECIFY number of slideshows
    var number_of_slideshows=3
    
    //#2 SPECIFY interval between slide (2000=2 seconds)
    var interval=1000
    
    //#3 SHOULD each slide be linked to a unique URL?
    var linked=0
    
    var slideshows=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slideshows[i]=new Array()
    
    //#4 SPECIFY image paths of 1st slideshow
    slideshows[0][0]='/images/plan/pbd9.jpg'
    
    
    //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
    slideshows[1][0]='/images/plan/pbd8.jpg'
    
    
    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[2][0]='/images/plan/pbd7.jpg'
    
    
    //EXTEND THIS ARRAY if more than 3 slide shows
    
    var maininc=0
    var subinc=0
    
    function slideit(){
    subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
    document.images.multislide.src=slideshows[maininc][subinc]
    }
    
    function setslide(which){
    clearInterval(runit)
    maininc=which
    subinc=0
    runit=setInterval("slideit()",interval)
    }
    
    runit=setInterval("slideit()",interval)
    </script>
    
      <IMG src="/images/plan/pbd9.jpg" name=multislide>
    <br>
      <A href="javascript:setslide(0)"><img src="/images/plan/zd1.jpg" border="0"></A>
      <A href="javascript:setslide(1)"><img src="/images/plan/zd2.jpg" border="0"></A>
      <A href="javascript:setslide(2)"><img src="/images/plan/zd3.jpg" border="0"></A>
    If anyone needs more information, please let me know. Thanks!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres something i've knocked up for you.

    Code:
    <!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">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var slideShow = function(id, interval) {
                    this.Items = new Array();
                    this.Parent = id;
                    this.Interval = interval; 
    
                    this.AddItem = function(img, text, url) { 
                        this.Items[this.Items.length] = new Array(img, text, url);
                    };
    
                    this.Render = function() {
                        var el = document.getElementById(this.Parent);
    
                        if(this.Items.length == 0) {
                            el.innerHTML = 'There are no items in your slide show';
                            return;
                        }
                        
                        var img = document.createElement('IMG');
                        var div = document.createElement('DIV');
    
                        el.innerHTML = '';
                        el.appendChild(img);
                        el.appendChild(div);
    
                        this.Slide(0);
                    };
    
                    this.Slide = function(current) {
                        if(current == this.Items.length)
                            current = 0;
                        this.LoadItem(this.Items[current]);
                        var me = this;
                        setTimeout(function() {
                            me.Slide(current+1);
                        }, me.Interval);
                    };
    
                    this.LoadItem = function(item) {
                        var el = document.getElementById(this.Parent);
                        var img = el.getElementsByTagName('IMG')[0];
                        var div = el.getElementsByTagName('DIV')[0];
    
                        img.src = item[0];
                        div.innerHTML = '<a href="' + item[2] + '">' + item[1] + '</a>';
                    };
                };
    
                window.onload = function() {
                    var ss = new slideShow('slideContainer', 5000);
                        ss.AddItem('http://www.kcrw.com/music/programs/mb/mb070906band_of_horses/mb070906Band_of_Horses167x120.jpg','Band of Horses','http://www.kcrw.com/music/programs/mb/mb070906band_of_horses');
                        ss.AddItem('http://www.kcrw.com/news/programs/tp/tp070906will_fred_thompson_b/tp070906Will_Fred_Thompson_B167x120.jpg','Will Fred Thompson Boost the GOP\'s Presidential Prospects?','http://www.kcrw.com/news/programs/tp/tp070906will_fred_thompson_b');
                        ss.Render();
                };    
            </script>
        </head>
        <body>
            
            <div id="slideContainer">Unable to load Slide Show</div>
    
        </body>
    </html>
    HTH


  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    Heres something i've knocked up for you.
    HTH
    Thanks for your help and fast response gRoberts! I've tested it on my work place's website and it works just fine!

    Just one little problem (and this can be directed to everyone): I'm not exactly looking for a slideshow that actually goes from one image to the next. If you looked at the code that I originally posted above, I took an existing slideshow-type of code and slightly "tweaked" it so that it would look and function like this website: http://www.kcrw.com. Look at the "Coming to KCRW" content box. The images aren't displayed in a slideshow. Instead, if you click on either one of the thumbnail images, the larger image and text change depending on what you click.

    In short, I don't want the pictures to rotate, I want them to change depending on what I click. Here's my edited version of gRoberts' code:

    Code:
    <script type="text/javascript">
               var slideShow = function(id, interval) {
                    this.Items = new Array();
                    this.Parent = id;
                    this.Interval = interval; 
    
                    this.AddItem = function(img, text, url) { 
                        this.Items[this.Items.length] = new Array(img, text, url);
                    };
    
                    this.Render = function() {
                        var el = document.getElementById(this.Parent);
    
                        if(this.Items.length == 0) {
                            el.innerHTML = 'There are no items in your slide show';
                            return;
                        }
                        
                        var img = document.createElement('IMG');
                        var div = document.createElement('DIV');
    
                        el.innerHTML = '';
                        el.appendChild(img);
                        el.appendChild(div);
    
                        this.Slide(0);
                    };
    
                    this.Slide = function(current) {
                        if(current == this.Items.length)
                            current = 0;
                        this.LoadItem(this.Items[current]);
                        var me = this;
                        setTimeout(function() {
                            me.Slide(current+1);
                        }, me.Interval);
                    };
    
                    this.LoadItem = function(item) {
                        var el = document.getElementById(this.Parent);
                        var img = el.getElementsByTagName('IMG')[0];
                        var div = el.getElementsByTagName('DIV')[0];
    
                        img.src = item[0];
                        div.innerHTML = '<a href="' + item[2] + '">' + item[1] + '</a>';
                    };
                };
    
                window.onload = function slideshow1() {
                    var ss = new slideShow('slideContainer', 5000);
                        ss.AddItem('/images/plan/pbd7.jpg','Pike Ferris Wheel','http://www.longbeach.gov');
                        ss.Render();
                };  
    			
    			function slideshow2() {
                    var ss = new slideShow('slideContainer', 5000);
                        ss.AddItem('/images/plan/pbd10.jpg','LB Convention Center','http://www.longbeach.gov/plan');
                        ss.Render();
                };  
    </script>
    
    <div id="slideContainer">unable to load image</div>
    
    <p><A href="#" onclick="slideshow2()"><img src="/images/plan/zd1.jpg" border="0"></A>
    My issue is that when I click the image (/images/plan/zd1.jpg), it switches the image and text contained in the "slideContainer" <div>, however the image doesn't stop and it keeps rotating onto the next image, which is not what I want to happen (I want it to function exactly like KCRW). Please, somebody help me make this work correctly! Thanks!

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some changes made

    Code:
    <!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">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var slideShow = function(id, thumbs) {
                    this.Items = new Array();
                    this.Parent = id;
                    this.Thumbs = thumbs;
    
                    this.AddItem = function(img, thumb, text, url) { 
                        this.Items[this.Items.length] = new Array(img, thumb, text, url);
                    };
    
                    this.Render = function() {
                        var el = document.getElementById(this.Parent);
    
                        if(this.Items.length == 0) {
                            el.innerHTML = 'There are no items in your slide show';
                            return;
                        }
                        
                        var img = document.createElement('IMG');
                        var div = document.createElement('DIV');
    
                        el.innerHTML = '';
                        el.appendChild(img);
                        el.appendChild(div);
    
                        var thumbs = document.getElementById(this.Thumbs);
    
                        for(var i = 0; i < this.Items.length; i++) {
                            if(i == 0)
                                thumbs.innerHTML = '';
                            if(this.Items[i].length == 4) {
                                var img = document.createElement('IMG');
                                    img.src = this.Items[i][1];
                                    var me = this;
                                    img.onclick =function(i) {
                                        return function() {
                                            me.Slide(i);
                                        }
                                    }(i);
                                thumbs.appendChild(img);
                            }
                        };
    
                        this.Slide(0);
                    };
    
                    this.Slide = function(current) {
                        this.LoadItem(this.Items[current]);
                    };
    
                    this.LoadItem = function(item) {
                        var el = document.getElementById(this.Parent);
                        var img = el.getElementsByTagName('IMG')[0];
                        var div = el.getElementsByTagName('DIV')[0];
    
                        img.src = item[0];
                        div.innerHTML = '<a href="' + item[3] + '">' + item[2] + '</a>';
                    };
                };
    
                window.onload = function() {
                    var ss = new slideShow('slideContainer', 'thumbs');
                        ss.AddItem('http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams/mb070907Lucinda_Williams167x120.jpg', 'http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams/mb070907Lucinda_Williams55x40.jpg','Lucinda Williams','http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams');
                        ss.AddItem('http://www.kcrw.com/news/programs/tp/tp_167x120.jpg', 'http://www.kcrw.com/news/programs/tp/tp_55x40.jpg','Reducing Energy Consumption','http://www.kcrw.com/news/programs/tp/tp070907reducing_energy_cons');
                        ss.AddItem('http://www.kcrw.com/etc/programs/ta/ta_167x120.jpg','http://www.kcrw.com/etc/programs/ta/ta_55x40.jpg','The Devil in Me','http://www.kcrw.com/etc/programs/ta/ta070908the_devil_in_me');
                        ss.Render();
                };    
            </script>
        </head>
        <body>
            
            <div id="slideContainer">Unable to load Slide Show</div>
    
            <div id="thumbs">No thumbs loaded</div>
    
        </body>
    </html>
    Generates thumbnails and displays the related image and text with url above.

    Credits to http://www.kcrw.com for the images.


  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by gRoberts View Post
    Some changes made

    Generates thumbnails and displays the related image and text with url above.

    Credits to http://www.kcrw.com for the images.

    Thank you so much gRoberts! You don't know how frustrating this was trying to figure it out all by myself (I've never done such a thing before and the CMS system at my work place doesn't support much JavaScript). I've tried out the code you provided and everything is looking good. I can't thank you enough, you're a lifesaver! Yay!

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a problem, its always a pleasure to help.


  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, instead of making a new thread, I've decided to continue this one since I don't want to have to repeat myself all over again. Anyways, based on this code:

    Code:
    <!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">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var slideShow = function(id, thumbs) {
                    this.Items = new Array();
                    this.Parent = id;
                    this.Thumbs = thumbs;
    
                    this.AddItem = function(img, thumb, text, url) { 
                        this.Items[this.Items.length] = new Array(img, thumb, text, url);
                    };
    
                    this.Render = function() {
                        var el = document.getElementById(this.Parent);
    
                        if(this.Items.length == 0) {
                            el.innerHTML = 'There are no items in your slide show';
                            return;
                        }
                        
                        var img = document.createElement('IMG');
                        var div = document.createElement('DIV');
    
                        el.innerHTML = '';
                        el.appendChild(img);
                        el.appendChild(div);
    
                        var thumbs = document.getElementById(this.Thumbs);
    
                        for(var i = 0; i < this.Items.length; i++) {
                            if(i == 0)
                                thumbs.innerHTML = '';
                            if(this.Items[i].length == 4) {
                                var img = document.createElement('IMG');
                                    img.src = this.Items[i][1];
                                    var me = this;
                                    img.onclick =function(i) {
                                        return function() {
                                            me.Slide(i);
                                        }
                                    }(i);
                                thumbs.appendChild(img);
                            }
                        };
    
                        this.Slide(0);
                    };
    
                    this.Slide = function(current) {
                        this.LoadItem(this.Items[current]);
                    };
    
                    this.LoadItem = function(item) {
                        var el = document.getElementById(this.Parent);
                        var img = el.getElementsByTagName('IMG')[0];
                        var div = el.getElementsByTagName('DIV')[0];
    
                        img.src = item[0];
                        div.innerHTML = '<a href="' + item[3] + '">' + item[2] + '</a>';
                    };
                };
    
                window.onload = function() {
                    var ss = new slideShow('slideContainer', 'thumbs');
                        ss.AddItem('http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams/mb070907Lucinda_Williams167x120.jpg', 'http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams/mb070907Lucinda_Williams55x40.jpg','Lucinda Williams','http://www.kcrw.com/music/programs/mb/mb070907lucinda_williams');
                        ss.AddItem('http://www.kcrw.com/news/programs/tp/tp_167x120.jpg', 'http://www.kcrw.com/news/programs/tp/tp_55x40.jpg','Reducing Energy Consumption','http://www.kcrw.com/news/programs/tp/tp070907reducing_energy_cons');
                        ss.AddItem('http://www.kcrw.com/etc/programs/ta/ta_167x120.jpg','http://www.kcrw.com/etc/programs/ta/ta_55x40.jpg','The Devil in Me','http://www.kcrw.com/etc/programs/ta/ta070908the_devil_in_me');
                        ss.Render();
                };    
            </script>
        </head>
        <body>
            
            <div id="slideContainer">Unable to load Slide Show</div>
    
            <div id="thumbs">No thumbs loaded</div>
    
        </body>
    </html>
    I would like to know how to randomize which image shows up upon page load. If that's not possible based on the code above, then how about rotating the images?

    Sorry, if I'm being a bother here. Someone suggested that my content slider would function better on my site if it either randomly loaded a different image upon page load or rotated the images. Thanks if anyone can help!

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you simply wanting a random image when loading rather then the first added?

    the slide function takes a number from 0 to the max slides, and shows the image etc for that slide. So using javascript's random you can get a random number between 0 and the max slides and display it.


  9. #9
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    are you simply wanting a random image when loading rather then the first added?

    the slide function takes a number from 0 to the max slides, and shows the image etc for that slide. So using javascript's random you can get a random number between 0 and the max slides and display it.
    Hi gRoberts. It's nice to see you on here again! Sorry I haven't responded in awhile. I never received an email notification indicating a topic reply (even though I had subscribed to this thread) so I assumed nobody replied, LOL and today I just decided to check up on the thread for the heck of it (I've been busy lately).

    Anyway, to answer your question, yes if it is possible, is there a way to make the images (or in this case, the slides) randomly load instead of their numerical orders? Thanks if you or anybody else is able to help. I still want to keep the same functions as the previous code you gave me but just random images/slides loaded instead of a specific order like 0, 1, 2.


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
  •