You are here: DENX Home »  Sandbox » SandBoxHeaderSlideshow

SandBoxHeaderSlideshow

This page renders the slide show displayed on the Site Home Page.

%STARTINCLUDE%%INCLUDE{"Applications/DenxApps/RenderSliderPro"}%
%ADDTOZONE{"head" 
   text="<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>"
}%
%ADDTOZONE{"script"
   requires="SLIDER_PRO"
   text="<script type='text/javascript'>
        $( document ).ready(function( $ ) {
                $( '#example1' ).sliderPro({
                        width: 960,
                        height: 500,
                        arrows: true,
                        buttons: false,
                        waitForLayers: true,
                        thumbnailWidth: 200,
                        thumbnailHeight: 100,
                        thumbnailPointer: true,
                        autoplay: false,
                        autoScaleLayers: false,
                        breakpoints: {
                                500: {
                                        thumbnailWidth: 120,
                                        thumbnailHeight: 50
                                }
                        }
                });
        });
   </script>"
}%

        <div id="example1" class="slider-pro">
                <div class="sp-slides">
                      <div class="sp-slide">
                                <img class="sp-image" src="%PUBURLPATH%/Applications/DenxApps/RenderSliderPro/src/css/images/blank.gif"\
                                        data-src="%PUBURL%/Main/DenxTheme/DX_We-embed_500x400.jpg"/>
                                <p class="sp-layer sp-white sp-padding sp-rounded"\
                                        data-horizontal="20%" data-vertical="20"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="1500" data-hide-delay="200">
                                        Free and Open Source Software
                                </p>
                                <p class="sp-layer sp-white sp-padding sp-rounded"\
                                        data-horizontal="25%" data-vertical="70"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="3000" data-hide-delay="100">
                                        for Embedded and
                                </p>
                                <p class="sp-layer sp-white sp-padding sp-rounded"\
                                        data-horizontal="30%" data-vertical="120"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="4500">
                                        Real-Time Systems
                                </p>
                        </div>
                      <div class="sp-slide">
                                <img class="sp-image" src="%PUBURLPATH%/Applications/DenxApps/RenderSliderPro/src/css/images/blank.gif"\
                                        data-src="%PUBURL%/Main/DenxTheme/DX_We-train_500x400.jpg"/>
                                <p class="sp-layer sp-white sp-padding sp-rounded"\
                                        data-horizontal="50" data-vertical="50"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
                                        <a href='%SCRIPTURL{view}%/Home/WebHome' class='sp-selectable'>Home page</a>
                                </p>
                                <p class="sp-layer sp-black sp-padding hide-small-screen sp-rounded"\
                                        data-horizontal="180" data-vertical="50"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
                                        dolor sit amet
                                </p>
                                <p class="sp-layer sp-white sp-padding hide-medium-screen sp-rounded"\
                                        data-horizontal="315" data-vertical="50"\
                                        data-show-transition="left" data-hide-transition="up" data-show-delay="800">
                                        consectetur adipisicing elit.
                                </p>
                        </div>
                      <div class="sp-slide">
                        <img class="sp-image" src="%PUBURLPATH%/Applications/DenxApps/RenderSliderPro/src/css/images/blank.gif"\
                                        data-src="%PUBURL%/Main/DenxTheme/DX_We-test_500x400.jpg"/>
                                <h3 class="sp-layer sp-black sp-padding sp-rounded" 
                                        data-horizontal="40" data-vertical="10%" 
                                        data-show-transition="left" data-hide-transition="left">
                                        Lorem ipsum dolor sit amet
                                </h3>
                                <p class="sp-layer sp-white sp-padding hide-medium-screen sp-rounded" \
                                        data-horizontal="40" data-vertical="22%" \
                                        data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200">
                                        consectetur adipisicing elit
                                </p>
                                <p class="sp-layer sp-black sp-padding hide-small-screen sp-rounded" \
                                        data-horizontal="40" data-vertical="34%" data-width="350" \
                                        data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                        </div>
                        <div class="sp-slide">
                                <img class="sp-image" src="%PUBURLPATH%/Applications/DenxApps/RenderSliderPro/src/css/images/blank.gif"\
                                        data-src="%PUBURL%/Main/DenxTheme/DX_We-update_500x400.jpg"/>
                                <p class="sp-layer sp-white sp-padding sp-rounded" \
                                        data-position="centerCenter" data-vertical="-50" \
                                        data-show-transition="right" data-hide-transition="left" data-show-delay="500" >
                                        Lorem ipsum dolor sit amet
                                </p>
                                <p class="sp-layer sp-black sp-padding hide-small-screen sp-rounded" \
                                        data-position="centerCenter" data-vertical="50" \
                                        data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
                                        consectetur adipisicing elit
                                </p>
                        </div>
                </div>
                <div class="sp-thumbnails">
                        <div class="sp-thumbnail">
                                <div class="sp-thumbnail-title">We Embed</div>
                                <div class="sp-thumbnail-description">Dolor sit amet, consectetur adipiscing elit sed</div>
                        </div>
                        <div class="sp-thumbnail">
                                <div class="sp-thumbnail-title">Training</div>
                                <div class="sp-thumbnail-description">We do training. Here's a link to the <a href='%SCRIPTURL{view}%/Home/Training' class='sp-selectable'>Training page</a>.</div>
                        </div>
                        <div class="sp-thumbnail">
                                <div class="sp-thumbnail-title">Testing</div>
                                <div class="sp-thumbnail-description">Tempor incididunt ut labore et dolore magna aliqua</div>
                        </div>
                        <div class="sp-thumbnail">
                                <div class="sp-thumbnail-title">Updating</div>
                                <div class="sp-thumbnail-description">Ad minim veniam, quis nostrud exercitation</div>
                        </div>
                </div>
    </div>
%STOPINCLUDE%
Copyright © 2002-2022 by DENX Software Engineering GmbH Imprint Terms & Conditions Privacy Feedback
This website is using cookies. More info. That's Fine