2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Kattintásra lenyíló szövegdoboz

 

Kattintásra lenyíló szövegdoboz

 

Ha valaki kettőt szeretne, akkor kicsit módosítani kell a kódot:
Keresd meg ezt a részt ebben a .js fájlban: /js/kattintasra-lenyilo-szovegdoboz-02.js
 

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')


ez alá mehet több, csak a textbox szót kell átírni, pl:
 

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')
animatedcollapse.addDiv('valami', 'fade=1,speed=400')
animatedcollapse.addDiv('lenyilo', 'fade=1,speed=400')


Aztán át kell írni a másik kódot is:
 

<div align="center">
<div id="animated-collapsible-box">
<div id="animated-collapsible-head">
<p style="text-align: center;">
<a href="#" rel="toggle[valami]" style="">Kattintásra lenyíló szövegdoboz</a></p>
<div class="animated-collapsible-text">
<div fade="1" id="valami" speed="400" style="display: none;">
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1414232751_66.png" style="width: 370px; height: 254px;" /></p>
</div></div></div></div></div>


A kiemelt részeket kell átírni.


Javascript kód
A .js fájlokat innen tudod lementeni, feltölteni a tárhelyedre és cserélni benne az URL címet a sajátodra.
kattintasra-lenyilo-szovegdoboz.js
kattintasra-lenyilo-szovegdoboz-01.js
kattintasra-lenyilo-szovegdoboz-02.js
 

<script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz.js">
</script><script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz-01.js">
</script><script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz-02.js">
</script>


Szövegdoboz kódja
 

<div align="center">
    <div id="animated-collapsible-box">
        <div id="animated-collapsible-head">
            <p style="text-align: center;">
                <a href="#" rel="toggle[textbox]" style="">Kattintásra lenyíló szövegdoboz</a>
            </p>
            <div class="animated-collapsible-text">
                <div fade="1" id="textbox" speed="400" style="display: none;">
            <p>
                &nbsp;
            </p>
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="/images/scripts/szovegdobozok/008/002.png" style="width: 370px; height: 254px;" /></p>
</div>
            </div>
        </div>
    </div>
</div>


CSS kód
 

<style type="text/css">
#animated-collapsible-box { /* az egész doboz */
   background-color: #000000;
   width: 400px;
   padding: 5px;
}
#animated-collapsible-head a:link, #animated-collapsible-head a:visited, #animated-collapsible-head a:hover { /* a fejléc */
   font-family: Book Antiqua;
   font-size: 17px;
   font-weight: normal;
   color: #ffffff !important;
   background-color: #e41e69;
   text-align: center;
   padding: 5px;
}
.animated-collapsible-text { /* tartalom */
   color: #ffffff !important;
   background-color: transparent;
   text-align: justify;
   width: 400px;
}
</style>


2 892 megtekintés

Hozzászólások