Jssor SlideShow Default Image

Jssor SlideShow Default Image

Hi,

I am using jssor slideshow and everything is working fine. I just have one question.. looking at the below code, how can I set a default image when no images populated from the database? I want when no images populated then to show logobanner.png image

here is the jquery:

  1.     //Reference http://www.jssor.com/development/slider-with-caption.html
  2.     //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
  3.     //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

  5.     var _CaptionTransitions = [];
  6.     _CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInCubic };
  7.     _CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $JssorEasing$.$EaseInCubic };
  8.     _CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $JssorEasing$.$EaseInCubic };
  9.     _CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $JssorEasing$.$EaseInCubic };
  10.     _CaptionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $JssorEasing$.$EaseInCubic };
  11.     _CaptionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $JssorEasing$.$EaseInCubic };
  12.     _CaptionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $JssorEasing$.$EaseInCubic };
  13.     _CaptionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $JssorEasing$.$EaseInCubic };

  15.     _CaptionTransitions["WAVE|L"] = { $Duration: 1500, $FlyDirection: 5, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseOutWave }, $ScaleVertical: 0.4, $Round: { $Top: 2.5} };
  16.     _CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };

  18.     var options = {
  19.         $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
  20.         $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
  21.         $FillMode: 4,
  22.         $CaptionSliderOptions:
  23.         {                                                   //[Optional] Options which specifies how to animate caption
  24.             $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
  25.             $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
  26.             $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
  27.             $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
  28.         }
  29.     };

  31.     var jssor_slider1 = new $JssorSlider$("slider1_container", options);


and this is the PHP:

  1. <?php
  2.     $mysql_command = "CALL sp_populate_channel_media(:param_channel_guid)";
  3.     $mysql_query = $mysql_connection->prepare($mysql_command);
  4.     $mysql_query->bindParam(':param_channel_guid', $_GET["id"], PDO::PARAM_STR);
  5.     $mysql_query->execute();

  7.     $mysql_row_count = $mysql_query->rowCount();

  9.     if ($mysql_row_count <= 0) {
  10. ?>
  11. <img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/temp_volow.png" width="700px" height="400px" />
  12. <?php } else { ?>
  13. <div id="slider1_container" style="position: relative; width: 700px; height: 400px;">
  14. <!-- Loading Screen -->
  15. <div u="loading" style="position: absolute; top: 0px; left: 0px;">
  16.     <center><img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/loading_200X200.gif" /></center>
  17. </div>
  18. <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 700px; height: 400px; overflow: hidden;">
  19. <?php while($mysql_row = $mysql_query->fetch()) { ?>
  20. <!-- Jssor Slider Begin -->
  21. <!-- You can move inline styles (except 'top', 'left', 'width' and 'height') to css file or css block. -->                
  22. <!-- Slides Container -->                    
  23. <div>
  24.     <a href="<?php echo $_SESSION["volow_domain_name"]; ?>article?aid=<?php echo $mysql_row['article_guid']; ?>"><img u="image" src="<?php echo $_SESSION["volow_domain_name"]; ?>gallery/members/<?php echo $mysql_row['member_guid']; ?>/<?php echo $_GET["id"]; ?>/<?php echo $mysql_row['article_guid']; ?>/<?php echo $mysql_row['file_name']; ?>.png" /></a>
  25.     <?php if (isset($mysql_row['media_title'])) { ?>
  26.     <div u="caption" t="MCLIP|B" style="position: absolute; top: 350px; left: 0px; width: 700px; height: 50px;">
  27.         <div style="position: absolute; top: 0px; left: 0px; width: 700px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);"></div>
  28.         <div style="position: absolute; top: 0px; left: 0px; width: 700px; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
  29.             <?php echo $mysql_row['media_title']; ?>
  30.         </div>
  31.     </div>
  32.     <?php } ?>
  33. </div>
  34. <!-- Slide -->
  35. <!-- Jssor Slider End -->
  36. <?php } ?>
  37. </div>
  38. </div>
  39. <?php } ?>