Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de D1esel Joi 29 Aug - 17:08
» 10 King
Scris de Erpel Vin 29 Mar - 16:31
» Bulletin ipb theme
Scris de MihaiExtremTutorials Sam 15 Dec - 0:24
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
Cuvinte-cheie

edit  


slideshow sub header

narcotiq
narcotiq
Membru nou
slideshow sub header  Offlin10
Mesaje : 8
Localizare : Romania Medgidia
Sex : masculin
0 avertismente
slideshow sub header  Emptyslideshow sub header la data de Mier 20 Noi - 9:17

Buna ziua, as vrea sa stiu cum pot pune un slideshow sub header, nu in generalitati pentru ca daca il pun acolo slideshow-ul are o dimensiune mare si daca vreau sa adaug widgeturi se strica slideul, Deci as vrea sa fie deasupra la widgets si forum.

slideshow sub header  Asaa10


uitati cum este la mine acuma. este bagat slideshoul in generalitati.

slideshow sub header  Da10


Iar daca activez widgeturile uitati ce se intampla:

slideshow sub header  Widget10

apar jos sub forum.

slideshow sub header  Daaaa10

Eu am inteles ca atunci cand activez widgeturile se micsoreaza dimensiunea forumului, dar ca sa nu se intample ce v-am aratat ar trebuii slideshowul sa il adaug in alta casuta cum este Anunturi, dar anunturile nu pot depasi latimea de 500 si e prea putin pentru ce imi trebuie mie. Sper ca ati inteles
Astept sa imi explicati ce e de facut slideshow sub header  247393



narcotiq
narcotiq
Membru nou
slideshow sub header  Offlin10
Mesaje : 8
Localizare : Romania Medgidia
Sex : masculin
0 avertismente
slideshow sub header  EmptyRe: slideshow sub header la data de Joi 21 Noi - 13:55

UP , cineva care stie ?
Teed
Teed
Membru activ
slideshow sub header  Offlin10
Mesaje : 485
Localizare : Undeva in tara asta
Sex : masculin
0 avertismente
http://www.extrem-tutorials.com
slideshow sub header  EmptyRe: slideshow sub header la data de Joi 21 Noi - 20:48

Creati o noua pagina HTML si adaugati codul:

Cod:
<!DOCTYPE HTML>
<!-- Diapo is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title>Diapo | A Pixedelic free jQuery slideshow</title>
 
<meta name="viewport" content="width=960">   
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //      Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
   
<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all'>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='scripts/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='scripts/diapo.js'></script>

<script>
$(function(){
  $('.pix_diapo').diapo();
});

</script>

<style>
body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 12px;
  line-height: 20px;
}
section {
  display: block;
  overflow: hidden;
  position: relative;
}
.button {
  background: #014464;
  background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
  border: 1px solid #368DBE;
  border-top: 1px solid #c3d6df;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 3px black;
  -webkit-box-shadow: 0 1px 3px black;
  box-shadow: 0 1px 3px black;
  color: white;
  display: block;
  font-size: 12px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
  text-transform: uppercase;
  width: auto;
}
.button2 {
  background: #d9ae00;
  background: -moz-linear-gradient(top, #b28b06, #9c7705 50%, #9c7705 51%, #5c4100);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b28b06), color-stop(.5, #9c7705), color-stop(.5, #9c7705), to(#5c4100));
  border: 1px solid #c7a60c;
  border-top: 1px solid #e5d51f;
}
.button3 {
  background: #ffd838;
  background: -moz-linear-gradient(top, #edbf21, #c89b0f 50%, #9c7705 51%, #906706);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #edbf21), color-stop(.5, #c89b0f), color-stop(.5, #c89b0f), to(#906706));
  border: 1px solid #c7a60c;
  border-top: 1px solid #e5d51f;
}
.price_table {
    float: right;
  font-size: 12px;
    margin: 10px auto 0;
    padding: 20px 0;
  position: relative;
  width: 570px;
}
.price_table .price_column.highlighted {
  background: #ffd838;
    margin: -5px!important;
  padding: 10px;
    z-index: 2;
}
.price_table .price_column {
  display: block;
  margin: 5px;
    float: left;
    position: absolute;
  width: 180px;
    z-index: 1;
}
.price_table .price_column > div {
  background: #eeeeee;
}
.price_table .price_column > div > div {
  padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > p {
  padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > ul {
  padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_title {
  background-color: #333333;
    border-top: 0!important;
    color: #ffffff;
    font-size: 14px;
}
.price_table .highlighted .price_title {
    font-size: 16px;
}
.price_table .price_price {
    font-size: 36px;
    line-height: 40px;
}
.price_table .highlighted  .price_price {
    font-size: 40px;
    line-height: 44px;
}
.price_table .price_explanation {
  font-size: 10px;
    line-height: 13px;
    text-transform: uppercase;
}
.price_table .cusButton {
  background-color: #333333;
  display: block;
    text-align: center;
}
.price_table li {
  padding: 5px 0;
}
.price_table div.pix_check {
  background: url(images/demo/list-check-green.png) no-repeat 15px center;
    padding-left: 38px!important;
}
.price_table div.pix_error {
  background: url(images/demo/list-error.png) no-repeat 15px center;
    padding-left: 38px!important;
}
</style>
 
</head>
<body>
    <section>
   
      <div style="overflow:hidden; width:960px; margin: 100px auto; padding:0 20px;">
                <div class="pix_diapo">

                    <div data-thumb="images/thumbs/megamind1048.jpg">
                        <img src="images/slides/megamind1048.jpg">
                        <div class="caption elemHover fromLeft">
                            This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
                        </div>
                    </div>
                   
                    <div data-thumb="images/thumbs/megamind_07.jpg">
                        <img src="images/slides/megamind_07.jpg">
                        <div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
                            Here you can see two captions.
                        </div>
                        <div class="caption elemHover fromLeft" style="padding-top:5px;">
                            The first are loaded immediately before than the second one
                        </div>
                    </div>
                   
                    <div data-thumb="images/thumbs/wall-e.jpg" data-time="7000">
                        <img src="images/slides/wall-e.jpg">
                        <div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
                            You can also get the same effect as the caption with:
                        </div>
                        <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
                            A button
                        </div>
                        <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
                            Or two buttons
                        </div>
                        <div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(images/demo/arrow_caption.png) no-repeat 230px 30px">
                            Or any other html element...<br>
                            and you can decide the transition time of any slide
                        </div>
                    </div>
                   
                    <div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
                        <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
                        <div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
                            You can also display videos, but it requires a "fake image"... read the documentation please
                        </div>
                    </div>
                   
                    <div data-thumb="images/thumbs/big_buck_bunny.jpg" data-time="7000">
                        <div style="position:absolute; top:0; left:0; width:900px; height:430px; padding:20px; background:#fff; color:#222;">
                          <div style="float:left; width:300px;">
                                <p><br><br>You can display any html element directly in the slider, but pay attention, with many elements the transition effect could be slowed.<br>
                                In this case you can see a Vimeo video and a price table</p>
                                <iframe src="http://player.vimeo.com/video/1084537?title=0&byline=0&portrait=0&color=f0bc00&autoplay=1" data-fake="images/slides/big_buck_bunny.jpg" width="300" height="169" frameborder="0"></iframe>
                            </div>
                            <div class="price_table"><div>
                                <div class="price_column highlighted" style="top:0; left:190px; height:387px; background:#fff; -moz-box-shadow: 0 1px 4px #666;  -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
                                </div></div><!-- .price_column -->
                                <div class="price_column" style="top:0; left:0; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666;  -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
                                </div></div><!-- .price_column -->
                                <div class="price_column" style="top:0; left:380px; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666;  -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
                                </div></div><!-- .price_column -->
                                <div class="price_column highlighted fadeIn" style="top:0; left:190px;"><div>
                                    <div class="price_title">Standard</div><!-- .price_title -->
                                    <div class="price_price">$9/mo.</div><!-- .price_price -->
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
                                    <div>
                                        <a class="button button3" href="#">Purchase</a>
                                    </div>
                                </div></div><!-- .price_column -->
                                <div class="price_column fromTop" style="top:0; left:0"><div>
                                    <div class="price_title">Basic</div><!-- .price_title -->
                                    <div class="price_price">Free</div><!-- .price_price -->
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
                                    <div>
                                        <a class="button" href="#">Purchase</a>
                                    </div>
                                </div></div><!-- .price_column -->
                                <div class="price_column fromBottom" style="top:0; left:380px;"><div>
                                    <div class="price_title">Professional</div><!-- .price_title -->
                                    <div class="price_price">$19/mo.</div><!-- .price_price -->
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
                                    <div>
                                        <a class="button" href="#">Purchase</a>
                                    </div>
                                </div></div><!-- .price_column -->
                            </div></div><!-- price_table -->
                        </div>
                    </div>
                   
                   
                    <div data-thumb="images/thumbs/ratatouille2.jpg">
                        <img src="images/slides/ratatouille2.jpg">
                    </div>
                   
              </div><!-- #pix_diapo -->
               
        </div>
   
   
    </section>
 
    </body>
</html>
narcotiq
narcotiq
Membru nou
slideshow sub header  Offlin10
Mesaje : 8
Localizare : Romania Medgidia
Sex : masculin
0 avertismente
slideshow sub header  EmptyRe: slideshow sub header la data de Vin 22 Noi - 9:13

se pare ca nu ai inteles.

Eu am slideshow gata facut, dar nu stiu cum sa il bag pe forum deasupra acolo unde sunt anunturile, ca daca il bag in generalitati, acesta avand dimensiuni mari imi strica widgeturile si le baga sub forum.

eu vreau sa il pun deasupra forumului deasupra la aia cu: esti conectat ca EXTRA Ultima vizita a fost joi la ora...

Sper ca ati inteles.
iAngel
iAngel
Membru activ
slideshow sub header  Offlin10
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
http://nimic.com
slideshow sub header  EmptyRe: slideshow sub header la data de Sam 14 Dec - 21:25

Versiunea forumului?
Teed
Teed
Membru activ
slideshow sub header  Offlin10
Mesaje : 485
Localizare : Undeva in tara asta
Sex : masculin
0 avertismente
http://www.extrem-tutorials.com
slideshow sub header  EmptyRe: slideshow sub header la data de Lun 23 Dec - 15:26

Postatarul nu a mai dat interes.
Hissae2
Hissae2
Membru premium
Membru premium
slideshow sub header  Offlin10
Mesaje : 459
Sex : masculin
0 avertismente
slideshow sub header  EmptyRe: slideshow sub header la data de Mier 1 Ian - 23:20

Mutat in sectiunea Problemelor Rezolvate
Continut sponsorizat
slideshow sub header  Offlin10
slideshow sub header  EmptyRe: slideshow sub header

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum