Search in forum:
Search


« View previous topic :: View next topic »  
Author Message
Post05/26/2009 at 3:20am (UTC)    
Post subject: scrypt my gallery

My scrypt may be useful to someone
Code:
<style type="text/css">
#scroller {width:530px; height:400px; position:relative;padding:0px 0; background:; margin:0 auto 20px auto;}
#scroller em {display:block; width:185px; height:175px; position:absolute; top:0; right:0; border:5px solid #ddd;}
#scroller span {display:block; width:330px; height:365px; position:absolute; top:0; left:0; border:5px solid #ddd;}
#scroller span b#copyright {font-size:10px; color:#888; position:absolute; bottom:5px; right:20px; font-family:georgia, verdana, arial, sans-serif; font-weight:normal;}

#scroller b#thumbs {display:block; width:176px; height:180px; overflow:auto; float:right; margin-top:175px; border:1px solid #ccc; border-width:5px 0 5px 5px; padding:5px;}
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
#scroller b#thumbs a img {width:50px; height:50px; border:0;}

#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}

#scroller b#thumbs a:hover img.hr {width:174px; height:163px; right:10px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt {width:174px; height:163px; right:10px; top:7px; border:1px solid #333;}

#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:360px; left:8px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:320px; height:360px; left:8px; top:7px; border:1px solid #333;}

</style>
<!--[if IE]>
<style type="text/css">
#scroller  b {
scrollbar-arrow-color: #333;
scrollbar-3dlight-color: #bbb;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #bbb;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #bbb;
scrollbar-track-color: #fff;
}
</style>
<![endif]-->


<div id="scroller">
<em></em>
<span><b id="copyright">&copy 2009 www.orzelkcynia.pl.tl</b></span>
<b id="thumbs">
<a href="#nogo"><img class="hr" src="http://www.tapetynajlepsze.yoyo.pl/przyroda/przyroda9.jpg" /></a>
<a href="#nogo"><img class="hr" src="http://img475.imageshack.us/img475/9370/tapvf1.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_19v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_17h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_18h.jpg" /></a>

<a href="#nogo"><img class="hr" src="photo/pic_19h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_20v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_21v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_22v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_20h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_21h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_23v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_14h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_24v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_23h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_18v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_25v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_24h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_25h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_26h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_26v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_27v.jpg" /></a>

<a href="#nogo"><img class="hr" src="photo/pic_27h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_28v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_28h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_29v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_29h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_30v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_31v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_30h.jpg" /></a>
</b>
</div>

______________


Post06/20/2009 at 6:41am (UTC)    
Post subject:

Post09/23/2009 at 9:30pm (UTC)    
Post subject:

@ orzelkcyniaaa,
Thank you for the javascript code.

@ chorvaworld,
You can try and see how the code works.

Have Fun Wink
______________
- If you love your own-free-website, fight against to spams and spammers! Please support us, let's remove all the spammers together! We don't want to see spams and spammers on OFW board!

- The only language of the board is English / Englisch / Anglaise / Inglés / Inglese / İngilizce / Angielski / Английский / Αγγλικά / 英语 / 英语简体英文. So please write in just English!

Own-free-website.com

Post01/31/2010 at 1:30pm (UTC)    
Post subject: change

how can i change the pictures in this script?
i realy like it an whant to but it in my web page whit my own pictures
soryy i hawe bad english
Post03/01/2010 at 11:14am (UTC)    
Post subject: Re: change

ramartini wrote:
how can i change the pictures in this script?
i realy like it an whant to but it in my web page whit my own pictures
soryy i hawe bad english



Hello, you see the following section in the code.

Quote:
<a href="#nogo"><img class="vt" src="photo/pic_19v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_17h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_18h.jpg" /></a>



Add your image url after src='' cmd. Look at the red areas in the code, you will see what I m talking about.

Good Luck Very Happy
______________
- If you love your own-free-website, fight against to spams and spammers! Please support us, let's remove all the spammers together! We don't want to see spams and spammers on OFW board!

- The only language of the board is English / Englisch / Anglaise / Inglés / Inglese / İngilizce / Angielski / Английский / Αγγλικά / 英语 / 英语简体英文. So please write in just English!

Own-free-website.com

Post06/13/2010 at 12:51pm (UTC)    
Post subject: Re: scrypt my gallery

orzelkcyniaaa wrote:
My scrypt may be useful to someone
Code:
<style type="text/css">
#scroller {width:530px; height:400px; position:relative;padding:0px 0; background:; margin:0 auto 20px auto;}
#scroller em {display:block; width:185px; height:175px; position:absolute; top:0; right:0; border:5px solid #ddd;}
#scroller span {display:block; width:330px; height:365px; position:absolute; top:0; left:0; border:5px solid #ddd;}
#scroller span b#copyright {font-size:10px; color:#888; position:absolute; bottom:5px; right:20px; font-family:georgia, verdana, arial, sans-serif; font-weight:normal;}

#scroller b#thumbs {display:block; width:176px; height:180px; overflow:auto; float:right; margin-top:175px; border:1px solid #ccc; border-width:5px 0 5px 5px; padding:5px;}
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
#scroller b#thumbs a img {width:50px; height:50px; border:0;}

#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}

#scroller b#thumbs a:hover img.hr {width:174px; height:163px; right:10px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt {width:174px; height:163px; right:10px; top:7px; border:1px solid #333;}

#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:360px; left:8px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:320px; height:360px; left:8px; top:7px; border:1px solid #333;}

</style>
<!--[if IE]>
<style type="text/css">
#scroller  b {
scrollbar-arrow-color: #333;
scrollbar-3dlight-color: #bbb;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #bbb;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #bbb;
scrollbar-track-color: #fff;
}
</style>
<![endif]-->


<div id="scroller">
<em></em>
<span><b id="copyright">&copy 2009 www.orzelkcynia.pl.tl</b></span>
<b id="thumbs">
<a href="#nogo"><img class="hr" src="http://www.tapetynajlepsze.yoyo.pl/przyroda/przyroda9.jpg" /></a>
<a href="#nogo"><img class="hr" src="http://img475.imageshack.us/img475/9370/tapvf1.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_19v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_17h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_18h.jpg" /></a>

<a href="#nogo"><img class="hr" src="photo/pic_19h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_20v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_21v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_22v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_20h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_21h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_23v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_14h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_24v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_23h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_18v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_25v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_24h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_25h.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_26h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_26v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_27v.jpg" /></a>

<a href="#nogo"><img class="hr" src="photo/pic_27h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_28v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_28h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_29v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_29h.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_30v.jpg" /></a>
<a href="#nogo"><img class="vt" src="photo/pic_31v.jpg" /></a>
<a href="#nogo"><img class="hr" src="photo/pic_30h.jpg" /></a>
</b>
</div>
Post07/05/2010 at 9:51am (UTC)    
Post subject: Nice Picture

Display posts from previous:   


Powered by phpBB © 2001, 2005 phpBB Group