DiaProjector Demo

« back to blogpost at CodeThatMatters.com

One single projector

... or click this link!

//this goes into your $(document).ready(function()
$(".dialink_1").diaprojector({
  id: "show",
  nmb_slides: 4
});
//html
<img src="images/clickme.jpg" alt="" class="dialink_1" />
<p>... or click <a href="#" class="dialink_1">this link</a>!</p>

Multiple projectors (+ quicker slides, no shortcuts info)

... or click this link!

3 
//this goes into your $(document).ready(function()
$(".dialink_2").diaprojector({
  class_name: "slideshow",
  show_shortcuts: false,
  overlay: false,
  seconds : 2
});
//html
<div class="slideshow" id="animals">
  <img src="images/clickme2.jpg" alt="" class="dialink_2" />
  <p>... or click <a href="#" class="dialink_2">this link</a>!</p>
  <span class="nmb_slides">3</span>
</div>
<div class="slideshow" id="buildings">
  <img src="images/clickme3.jpg" alt="" class="dialink_2" />
  <p>... or click <a href="#" class="dialink_2">this link</a>!</p>
  <span class="nmb_slides">3</span>
</div>

... or click this link!

3

One single projector (in Swedish)

... or click this link!

//this goes into your $(document).ready(function()
$(".dialink_3").diaprojector({
  id: "show",
  nmb_slides: 2,
  show_shortcuts: true,//true is default
  text_prev : "Föreg.",//swedish language! :)
  text_next : "Nästa",
  text_turn_off : "Stäng av",
  image_folder : "images/diaprojector/css",//images/diaprojector/css is default
  slideimages_folder : "images/diaprojector/slides",//images/diaprojector/slides is default
  image_format : "jpg",//jpg is default
  seconds : 4//5 seconds each slide is default
});
//html
<img src="images/clickme.jpg" alt="" class="dialink_3" />
<p>... or click <a href="#" class="dialink_3">this link</a>!</p>