Web Development

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

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

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

var options = {
    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $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)
    $FillMode: 4,
    $CaptionSliderOptions:
    {                                                   //[Optional] Options which specifies how to animate caption
        $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
        $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
        $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
        $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
    }
};

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

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

    $mysql_row_count = $mysql_query->rowCount();

    if ($mysql_row_count <= 0) {
?>
<img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/temp_volow.png" width="700px" height="400px" />
<?php } else { ?>
<div id="slider1_container" style="position: relative; width: 700px; height: 400px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
    <center><img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/loading_200X200.gif" /></center>
</div>
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 700px; height: 400px; overflow: hidden;">
<?php while($mysql_row = $mysql_query->fetch()) { ?>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles (except 'top', 'left', 'width' and 'height') to css file or css block. -->                
<!-- Slides Container -->                    
<div>
    <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>
    <?php if (isset($mysql_row['media_title'])) { ?>
    <div u="caption" t="MCLIP|B" style="position: absolute; top: 350px; left: 0px; width: 700px; height: 50px;">
        <div style="position: absolute; top: 0px; left: 0px; width: 700px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);"></div>
        <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;">
            <?php echo $mysql_row['media_title']; ?>
        </div>
    </div>
    <?php } ?>
</div>
<!-- Slide -->
<!-- Jssor Slider End -->
<?php } ?>
</div>
</div>
<?php } ?>