Marquel World Information Technology

  • Simple Slider Icon_r11
We allready update to new theme & 2 GDesign custom theme coming up. Stay tuned for more updates coming soon By: Admin Kosmyn and the rest of the staff of this support forum
ChatBox

You are not connected. Please login or register

Marquel Forum » Computer Zone » PC Software Chat » Simple Slider

Maw1Simple Slider Empty Simple Slider Sun Mar 11, 2012 9:32 am

  • Moderator
Maw
Moderator


Simple Slider 9010


Item Name : Simple Slider
Forum Version : All Version
Notice : This is copyrighted by other web. The FA Supporter not own this item. You may not publish it on anywhere without permission from the FA Supporter administrators.

Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page:
Code:
<html>
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
 
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
 
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
 
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">
 
        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">
                <img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
                <img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
       
        </div>
 
    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>

Change the pictures links.

Add this to your homepage and insert he adres of your HTML page in it:
Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>

View previous topic View next topic Back to top Message [Page 1 of 1]

Marquel Forum » Computer Zone » PC Software Chat » Simple Slider

Permissions in this forum:
You cannot reply to topics in this forum