Solved

How to create a dojo slideshow

Posted on 2013-11-20
11
509 Views
Last Modified: 2013-11-26
This is (part of) a web page. For some reason, I fail to get the slide-show operational. Can you help me fix it?
<!DOCTYPE html>
<html>
  <head lang='fr'>
    <meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
    <link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
  </head>
  <body class='claro'>
  <script>
	dojoConfig = {async: true, parseOnLoad: true}
  </script>
  <script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'></script> 
  <script type='text/javascript'>
    require(["dojo", "dojo/parser", "dojo/store/Memory", "dojox/image/SlideShow"]);
	var imageData= {
		identifier: "imageUrl",
		items: [
              { imageUrl: "http://mysyte.net/photos/f1.jpg"},
              { imageUrl: "http://mysyte.net/photos/f2.jpg"},
              { imageUrl: "http://mysyte.net/photos/f3.jpg"},
              { imageUrl: "http://mysyte.net/photos/f4.jpg"}
            ]
	};              
  </script>
  <div data-dojo-type='dojo/store/Memory' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
  <div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
      data-dojo-props='store: imageStore, noLink: true, autoStart:true, imageWidth:770, imageHeight:345, slideshowInterval: 5'>
  </div>
</body>
</html>

Open in new window

What am I missing??
0
Comment
Question by:Sjef Bosman
  • 6
  • 5
11 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 39662900
I am not familiar with this slideshow dojo, but is this supposed to have an x in it:
dojox/image/SlideShow
0
 
LVL 46

Author Comment

by:Sjef Bosman
ID: 39662924
Thanks for your reply!

See http://dojotoolkit.org/reference-guide/1.9/dojox/image/SlideShow.html

By the way, debugging the page in Firebug showed that the thing is moving (opacity changes when moving over the area). The problem is that the images aren't loaded. None of the four I specified, and they do exist, I verified.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39662990
what is this doing in line 26?
store: imageStore
I don't see this attribute mentioned in the link you sent.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 46

Author Comment

by:Sjef Bosman
ID: 39663029
That refers to the Memory store created on line 24, which contains the urls to the images. I can see the contents of that store in the debugger, they seem correct but I cannot tell you that they indeed are correct.

There are 2 ways to create a store apparently: using JS and de declarative way. I tested both, to no avail.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39663055
Can you try taking that out for now? I don't see it listed in the props anywhere on the link you sent me, even when the id is set.
My experience with javascript is that errors make the whole page fail.
Did you try using double quotes in lines 24-26?
0
 
LVL 46

Author Comment

by:Sjef Bosman
ID: 39663344
Thanks for the ideas, but no, sorry, I can't take anything out, because that's the way it's supposed to work in dojo 1.9. Create a Store, create a SlideShow and then connect the Store to the SlideShow. The link above uses the JavaScript/programmatical way, it should be equivalent to the declarative way (which it seems to be, it doesn't work either :-))

If you have the possibility to modify the page and add some images on your web server (Apache, e.g. WAMP or LAMP), you can test the page every way you like. I just have the idea there's one missing link, one small missing element, and then it works. We're so close...
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39663434
I am just trying to look at your code with fresh eyes, and the sample code used double quotes for what you have in lines 24-26.

How about the ready function? Is that required?

dojo.ready(function(){
....
0
 
LVL 46

Author Comment

by:Sjef Bosman
ID: 39663458
Eh, yes, ready is the equivalent of the older dojo.addOnLoad. Single or double quotes are irrelevant to HTML.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39663581
I meant that you have not included the ready statement.
(I am used to php where single and double quotes can make a difference)
0
 
LVL 46

Accepted Solution

by:
Sjef Bosman earned 0 total points
ID: 39665802
Problem solved.
<!DOCTYPE html>
<html>
  <head lang='fr'>
    <meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
    <link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
  </head>
  <body class='claro'>
  <script>
	dojoConfig = {async: true, parseOnLoad: true}
  </script>
  <script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'></script>
  <script type='text/javascript'>
	var imageData= {
		identifier: "imageUrl",
		items: [
              { imageUrl: "http://mysyte.net/photos/f1.jpg"},
              { imageUrl: "http://mysyte.net/photos/f2.jpg"},
              { imageUrl: "http://mysyte.net/photos/f3.jpg"},
              { imageUrl: "http://mysyte.net/photos/f4.jpg"}
             ]
	};
    require(["dojo", "dojo/data/ItemFileReadStore", "dojox/image/SlideShow", "dijit/registry"], function(dojo, ItemFileReadStore, SlideShow, registry) {
			dojo.ready(function() {
			  registry.byId('slideshow1').setDataStore(imageStore, {})
			})
		});
  </script>
  <div data-dojo-type='dojo/data/ItemFileReadStore' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
  <div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
      data-dojo-props='autoStart:true, showTitle: false, noLink: true, hasNav: false, imageWidth:770, imageHeight:345, fixedHeight: true, slideshowInterval: 5'>
  </div>
</body>
</html>

Open in new window


Apparently, the SlideShow object in dojo has tome bugs/inconsistencies. I even had to modify the dojox/image/SlideShow.js file. The clues I found here: http://petergragert.info/dojo/demo/PKHG_won_22feb.html and on a Dojo forum, a post by the same person.
0
 
LVL 46

Author Closing Comment

by:Sjef Bosman
ID: 39677025
Clues found while searching through a Dojo forum.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question