Multimedia Box - Druckversion

Code:

<style type="text/css">

#banner {

    margin-top:10px;

    width:560px;

    height:315px;

    overflow:hidden;

    position:relative;

}



#banner .item {

    position:absolute;

    width:560px;

    height:315px;

}



#banner .active {

    z-index:7;

}



#banner .last-active {

    z-index:6;

}



#banner .navigation {

    position:absolute;

    bottom: 0;

    margin:0;

    list-style:none;

    z-index:8;

    padding:0;

}



#banner .navigation li {

    float:left;

    width:10px;

    height:10px;

    background:black;

    margin-left:5px;

    cursor:pointer;

}



#banner .navigation li.active {

    background:red;

}



#banner .special {

    background:#eee;

}



#banner .content {

    padding: 20px;

    text-align: center;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="./jquery.slideshow.advanced.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

            $('#banner').slideshow();

        });

</script>

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

    <tr>

        <td class="thead" colspan="2"><strong>Multimedia Box</strong></td>

    </tr>

    <tr>

        <td width="50%" class="trow1" valign="top">

            <iframe width="560" height="315" src="https://www.youtube.com/embed/I4tFNfROlqk" frameborder="0" allowfullscreen></iframe>

        </td>

        <td width="50%" class="trow1" valign="top">

            <div id="banner">

        <div class="item active trow1"><img src="https://s-media-cache-ak0.pinimg.com/736x/eb/af/b9/ebafb95dfc67635a3314580bbdb43816.jpg" border="0" width="560" height="315" /></div>

        <div class="item special trow1">

            <div class="content trow1">

                <h1>Slide title</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sapien nunc. Proin aliquet imperdiet felis id semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque purus tellus, iaculis id iaculis vel, tincidunt non lectus.</p>

                <p>Vivamus a massa est. Nunc nulla mauris, interdum at hendrerit eget, condimentum ut orci. Pellentesque id congue eros. Suspendisse convallis nibh non lacus molestie adipiscing. Nunc vel dolor sed sem dictum tristique id quis magna. Etiam eu est nec arcu tristique fermentum.</p>

            </div>

        </div>

        <div class="item trow1"><img src="http://localhost/50/images/logo.png" border="0" width="560" height="315" /></div>

        <div class="item trow1"><img src="http://images.china.cn/attachement/jpg/site1003/20141031/7427ea210a2a15bd6d8001.jpg" border="0" width="560" height="315" /></div>

    </div>

        </td>

    </tr>

</table><br />

Code:

<style type="text/css">

.coin-slider { overflow: hidden; zoom: 1; position: relative; }

.coin-slider a{ text-decoration: none; outline: none; border: none; }



.cs-buttons { font-size: 0px; padding: 10px; float: left; }

.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }

.cs-active { background-color: #B8C4CF; color: #FFFFFF; }



.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }



.cs-prev, 

.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

</style>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="./coin-slider.min.js" type="text/javascript"></script>



   <script type="text/javascript">

     $(document).ready(function() {

       $('#coin-slider').coinslider({ width: 560, height: 315, navigation: false, delay: 5000 });

     });

   </script>



<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

   <tr>

       <td class="thead" colspan="2"><strong>Multimedia Box</strong></td>

   </tr>

   <tr>

       <td width="50%" class="trow1" valign="top" align="center">

<object width="560" height="315">

<param name="movie" value="https://www.youtube.com/v/I4tFNfROlqk?hl=de_DE&vq=hd720&amp;version=3&amp;rel=0"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>

 <embed src="https://www.youtube.com/v/I4tFNfROlqk?hl=de_DE&vq=hd720&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

</object>

       </td>

       <td width="50%" class="trow1" valign="top" align="center"> 

<div id='coin-slider'>

<!-- Slider 1 Start -->

<a href="img01_url" target="_blank"><img src='uploads/multimediabox/helene001.jpg' >

        <span>

          Description for img01

        </span>

</a>

<!-- Slider 1 Ende -->

<!-- Slider 2 Start --> 

<a href="img01_url" target="_blank"><img src='uploads/multimediabox/helene002.jpg' >

        <span>

          Description for img01

        </span>

</a>

<!-- Slider 2 Ende -->

</div>

       </td>

   </tr> 

</table><br />