Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to create a dojo slideshow

Posted on 2013-11-20
11
Medium Priority
?
590 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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 embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

589 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