?
Solved

How to create a dojo slideshow

Posted on 2013-11-20
11
Medium Priority
?
548 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

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.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

765 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