?
Solved

How to create a dojo slideshow

Posted on 2013-11-20
11
Medium Priority
?
558 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …
Suggested Courses

650 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