Solved

How to create a dojo slideshow

Posted on 2013-11-20
11
504 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change div area and length 1 28
Little bit of help styling my heading 3 21
where is team.js? 3 27
Multiflying 2 Input Text On a Table 7 22
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

832 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