You are here

Home » API reference » Zircon Profile 8.0

Simple Fade Slideshow Theme - Jssor Slider, Slideshow with Javascript Source Code in Zircon Profile 8.0

Same filename in this branch
  1. 8.0 themes/zircon/includes/jssor/slideshow.source.html
  2. 8.0 themes/zircon/includes/jssor/demo/simple-fade-slideshow.source.html
Same filename and directory in other branches
  1. 8 themes/zircon/includes/jssor/slideshow.source.html

File

themes/zircon/includes/jssor/slideshow.source.html
View source 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple Fade Slideshow Theme - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jssor.core.js"></script>
        <script type="text/javascript" src="js/jssor.utils.js"></script>
        <script type="text/javascript" src="js/jssor.slider.js"></script>
        <script type="text/javascript" src="../js/slideshow.js"></script>
        <link type="text/css" rel="stylesheet" href="../css/slideshow.css" media="all" />    
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
            <div>
                <img u="image" src="img/landscape/02.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/03.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/04.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/05.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/06.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/07.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/08.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/09.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/10.jpg" />
            </div>
            <div>
                <img u="image" src="img/landscape/11.jpg" />
            </div>
        </div>
        <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
            <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
        </div>
        <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;">
        </span>
        <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px">
        </span>
    </div>
</body>
</html>