Coding Help

TriedandTested

TriedandTested

TriedandTested

Soldato
Joined
11 Jul 2004
Posts
16,147
Location
Neptune
Trying to implement a version of this: http://www.bbc.co.uk/glow/docs/1.7/api/glow.widgets.carousel.shtml

On this page: http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/ it gives some different variations of how to implement some of the various carousels supported.

I can't get it working! :(

Playing about I have this VERY basic page working, but can someone help me get any of the carousels on that page working? I'm confused. :)

This is the basics page I have working just fine:

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>Hello Glow</title>

        <script src="../js/glow/1.7.3/core/core.js" type="text/javascript"></script>
        <script src="../js/glow/1.7.3/widgets/widgets.js" type="text/javascript"></script>
        <link href="../js/glow/1.7.3/widgets/widgets.css" type="text/css" rel="stylesheet" />
        
    <script type="text/javascript">
        glow.ready(function() {
        glow.dom.get("p").css("border", "2px dashed #CCC");
        glow.events.addListener(
                ".salutation",
                "click",
                function () { 
                        alert(glow.dom.get(this).html()); 
                }
        );
});

    </script>

</head>
<body>
    <p class="salutation">Hello,</p>
    <p class="salutation">World</p>
</body>
</html>
 
If you've got the libraries for the glow widgets (those script sources look right, although they are local), all you need is the markup and the constructor to fire it up.

Have you tried stealing directly from the bbc's example page and then modifying from there?
 
Yes, I have the libraries locally and they work just fine with the example I posted.

It's the markup and constructor that I must be struggling with I think. I can't work out from their examples what goes where! :)

I've tried 'borrowing' their code but to no avail.
 
Hokey, well, something like the following should work.

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>Hello Glow</title>

        <script src="../js/glow/1.7.3/core/core.js" type="text/javascript"></script>
        <script src="../js/glow/1.7.3/widgets/widgets.js" type="text/javascript"></script>
        <link href="../js/glow/1.7.3/widgets/widgets.css" type="text/css" rel="stylesheet" />
        
    <script type="text/javascript">
        glow.ready(function() {
        glow.dom.get("p").css("border", "2px dashed #CCC");
        glow.events.addListener(
                ".salutation",
                "click",
                function () { 
                        alert(glow.dom.get(this).html()); 
                }
        );
});

    </script>

</head>
<body>
    <p class="salutation">Hello,</p>
    <p class="salutation">World</p>

<ol id="carousel">
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_one.gif" alt="BBC One" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_two.gif" alt="BBC Two" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_three.gif" alt="BBC Three" width="100" height="73" /></li>

  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_four.gif" alt="BBC Four" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_hd.gif" alt="BBC HD" width="100" height="32" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/cbbc.gif" alt="CBBC" width="100" height="62" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/cbeebies.gif" alt="CBeebies" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/news.gif" alt="BBC News" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/parliament.gif" alt="BBC Parliament" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_1.gif" alt="Radio 1" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_2.gif" alt="Radio 2" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_3.gif" alt="Radio 3" width="100" height="56" /></li>

  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_4.gif" alt="Radio 4" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/five_live.gif" alt="Five Live" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/6_music.gif" alt="6Music" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_7.gif" alt="BBC 7" width="100" height="56" /></li>
</ol>

<script type="text/javascript">
(function() {
	gloader.load(["glow", "1", "glow.widgets.Carousel"],{
		async: true,
		onLoad: function(glow) {
			glow.ready(function () {
				var carousel = new glow.widgets.Carousel("#carousel"),
			});
		}
	});
})();
</script>


</body>
</html>

Something like the above should work, but I've probably not got the brackets/braces right. So you'd have to look at those.
 
screenshot20100505at170.png


The 'Hello World' bit is just fine, as it should be. The rest, as you can see, isn't. Appreciate the help so far.
 
I haven't had time to look at this tonight, if its still not working tmrw evening I will try and get it working my end.
 
Try this:

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>Hello Glow</title>

        <script src="../js/glow/1.7.3/core/core.js" type="text/javascript"></script>
        <script src="../js/glow/1.7.3/widgets/widgets.js" type="text/javascript"></script>

<script type="text/javascript" src="http://node1.bbcimg.co.uk/glow/gloader.0.1.3.js">
gloader.use("glow", {map: "http://node1.bbcimg.co.uk/glow/glow/map.1.7.3.js"});
</script>

        <link href="../js/glow/1.7.3/widgets/widgets.css" type="text/css" rel="stylesheet" />
        
    <script type="text/javascript">
        glow.ready(function() {
        glow.dom.get("p").css("border", "2px dashed #CCC");
        glow.events.addListener(
                ".salutation",
                "click",
                function () { 
                        alert(glow.dom.get(this).html()); 
                }
        );
});

    </script>

</head>
<body>
    <p class="salutation">Hello,</p>
    <p class="salutation">World</p>

<ol id="carousel">
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_one.gif" alt="BBC One" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_two.gif" alt="BBC Two" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_three.gif" alt="BBC Three" width="100" height="73" /></li>

  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_four.gif" alt="BBC Four" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_hd.gif" alt="BBC HD" width="100" height="32" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/cbbc.gif" alt="CBBC" width="100" height="62" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/cbeebies.gif" alt="CBeebies" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/news.gif" alt="BBC News" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/parliament.gif" alt="BBC Parliament" width="100" height="73" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_1.gif" alt="Radio 1" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_2.gif" alt="Radio 2" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_3.gif" alt="Radio 3" width="100" height="56" /></li>

  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/radio_4.gif" alt="Radio 4" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/five_live.gif" alt="Five Live" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/6_music.gif" alt="6Music" width="100" height="56" /></li>
  <li><img src="http://www.bbc.co.uk/ui/ide/1/images/brand/100/bbc_7.gif" alt="BBC 7" width="100" height="56" /></li>
</ol>


<script type="text/javascript">
(function() {
	gloader.load(["glow", "1", "glow.widgets.Carousel"],{
		async: true,
		onLoad: function(glow) {
			glow.ready(function () {
				var carousel = new glow.widgets.Carousel("#carousel"),
					carousel5 = new glow.widgets.Carousel("#carousel5",{
						id: "layeredCarousel",
						loop: true,
						size: 3
					});
					carousel5.moveBy(-1,false);
			});
		}
	});
})();
</script>


</body>
</html>
 
No problemo.

I think you missed out including one of their required libraries. Easily done.

But the thing that still confuses me is the reference tag for the carousel I have left is "carousel1".. yet when I removed the initialisation for carousel5 from the script at the bottom it broke it anyway...

Either way, yeh modify for your needs and keep testing it so if something does break you know how to fix it.
 
Working a treat now, thanks gord.

The section:
PHP: 
<script type="text/javascript" src="http://node1.bbcimg.co.uk/glow/gloader.0.1.3.js">gloader.use("glow", {map: "http://node1.bbcimg.co.uk/glow/glow/map.1.7.3.js"});
</script>

I want the code to point to the JS I have locally on my website. I've changed to:

PHP: 
<script type="text/javascript" src="http://node1.bbcimg.co.uk/glow/gloader.0.1.3.js">gloader.use ("glow", {map: "../js/glow/1.7.3/glow/map.1.7.3.js"});
</script>

Works fine. However, if I point the first BBC .js link to the same .js on my domain it doesn't work. Any ideas?
 
You must log in or register to reply here.
Back
Top Bottom