Java Image Slider

[ miki987 @ 11.01.2012. 21:48 ] @

Zdravo, pocetnik sam u Javi zapravo nemam skoro uopste iskustva, potreban mi je image-slider efekat. Imam skriptu koja mi odgovara (prilog) ali ne umem da je importujem i pozicioniram u svoj HTML kod. Problem je sledeci:

Pozicija radi samo Top (za levo ili desno ne umem da sredim)
Kada pozovem u svoj HTML kod JAva skriptu ne umem da pozovem zaseban CSS koji je vezan za njega

Potrebno mi je objasnjenje

HTML

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>
                <li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>
                <li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>
                <li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:4,
    resume:false,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
</script>
</body>
</html>

CSS

Code:
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#ddd}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:673px; margin:50px auto}
#container {position:relative; background:#fff; padding:32px; height:235px; border-right:1px solid #ccc; border-bottom:1px solid #ccc}
.sliderbutton {float:left; width:25px; height:235px; cursor:pointer}
#slideleft {background:url(images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:558px; height:235px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:558px; height:235px}
.pagination {position:absolute; top:40px; right:61px; list-style:none; height:25px}
.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:#fff}

[ plague @ 12.01.2012. 09:48 ] @

Prvo, Java i JavaScript sem po nazivu nemaju apsolutno nikakvih slicnosti, i treba ih jasno odvojiti.
Drugo, taj CSS koji ide uz slider samo treba ubaciti u HTML stranicu. Kao sto ubacis svoj CSS, tako ubacis i ovaj.

Ono sto treba uraditi je:
1. Kopirati div sa id="wrapper" tamo gde zelimo slider (u ostatku koda ne sme biti koriscen taj id za neke druge elemente)
2. Kopirati CSS kod ili ga inportovati
3. Inportovati skriptu koja ide uz taj slider(najcesce je to .js file koji se moze preuzeti sa sajta slider-a)
4. Kopirati JavaScript kod koji se nalazi ispod div-a "wrapper" jer on definise konkretan slider.
5. Kopirati slicice koje idu uz slider

Posle toga samo sam izaberi slike koje zelis menjanjem src atributa.

[ miki987 @ 12.01.2012. 11:23 ] @

zahvaljujem,

2. Kopirati CSS kod ili ga inportovati

(izmedju kojih tagova treba ubaciti CSS ako ga kopiram u HTML?) Meni je problem da ga pozivam jer vec imam jedan koji sluzi da pozove CSS za ostale stvari u HTML-u

3. Inportovati skriptu koja ide uz taj slider(najcesce je to .js file koji se moze preuzeti sa sajta slider-a)

(da imam taj .js, samo ne razumem kako mislis da je importujem?)

i jos jedno, kako pozicionirati kasnije slider?

[ plague @ 12.01.2012. 11:58 ] @

Negde u head sekciji napravi:

Code (html):

<style type="text/css">

     /*ovde ubaciti css*/

</style>

Mozes ubaciti neograniceno puno css-a preko nekoliko <link> tagova ili direktno u stranicu preko <style> tagova, nisi ogranicen na samo jedan file:

Code (html):

<link rel="stylesheet" type="text/css" href="1.css" />

<link rel="stylesheet" type="text/css" href="2.css" />

<link rel="stylesheet" type="text/css" href="3.css" />

...

___

Ja navikoh da pricam import zbog drugih jezika, mislio sam da ubacis kod preko <script> taga:

Code (html):

     <script type="text/javascript" src="script.js"></script>

 

___

Rekao sam ti za pozicioniranje, pogledaj kod koji si postavio, tu imas <div id="wrapper">. Sve sto je unutar tog div-a zajedno sa njim samim kopiraj unutar koda gde zelis da ti se slajder nalazi.

[ miki987 @ 12.01.2012. 12:05 ] @

Citat:

mogu li isto i .js skripte neograniceno ubacivati isto kao css?

Citat:

[ plague @ 12.01.2012. 12:07 ] @

Apsolutno da. :]

[ miki987 @ 12.01.2012. 12:31 ] @

sve ovo sam skapirao i radi osim pozicioniranja slider-a :D
moze pomoc, molim te pogledaj

[ plague @ 12.01.2012. 13:39 ] @

Hm... Ne znam kako si zamislio da izgleda posto mi ovo cak ni ne lici na web stranu nego na nasumicno nabacane elemente?

Jesi li nov samo u javascriptingu ili uopste i u web dizajniranju?

[ miki987 @ 12.01.2012. 13:56 ] @

ma to sam nabacao samo da bi uspeo objasniti sta mi treba, web dizajn radim saljem ti na pvt neke moje sajtove i koju tehnologiju preferiram, ali mi je javascript nepoznata ... sve sto mi treba je samo da ovaj slider ubacim na odredjeno mesto, nista vise

[ plague @ 12.01.2012. 14:45 ] @

Evo ti primer, pogledaj source kod i videces kako sam ubacio ceo slider unutar sekcije koju sam izabrao.

[ miki987 @ 12.01.2012. 14:55 ] @

ok, i sta sad npr slider treba da se udalji od plave pozadine za 20px prema desno? Po ovome, plavu pozadinu treba da po sirini povecam za 20px??? Ako je tako, zar je nemoguce slider kao celinu pozicionirati kao npr. sliku

Code:
... style="left:38px; top:200px; width:200px; height:125px;">

u prevodu, koliko shvatam a ispravi me ako gresim ovo se postize guranjem :D plave pozadine da bi dobio zeljenu poziciju? A onda tu plavu obojim u boju background*a i posao gotov? Stvarno ne razumem.

_{[Ovu poruku je menjao miki987 dana 12.01.2012. u 16:07 GMT+1]}

_{[Ovu poruku je menjao miki987 dana 12.01.2012. u 16:07 GMT+1]}

[ plague @ 12.01.2012. 16:11 ] @

Pazi, slika predstavlja <img> tag koji ima odredjeni src atribut koji opisuje sliku. Taj <img> tag hierarhijski ubacujes u zeljenu sekciju (<div>) gde zelis da bude (u mom primeru imas ukupno 5 sekcija namenjenih sadrzaju), zatim CSS-om manipulises kako ce unutar te sekcije da se prikaze.

Povecavanjem sirine plave sekcije, postici ces samo to, tj. slider ce se pomeriti na desno, ali zajedno i sa ostatkom sadrzaja koji je u tom divu gde je i sam slider, a dalje zbog toga ces gurnuti i ostale elemente koje su u istom herarhijskom nivou, nekada cak i narusiti ceoukpan dizajn time.

Ako zelis samo slider da pomeris 20px desno bez da se bilo sta drugo pomeri, mozes to uraditi tako sto ces tom divu u kome se on nalazi (<div id="wrapper"> da dodelis css atribut margin-left:20px i time ga udaljiti od bilo kog drugog elementa koji je sa leve strane za 20px.
Izmeni liniju:

Code (html):

<div id="wrapper">

 

Code (html):

<div id="wrapper" style="margin-left:30px;">

 

i posmatraj sta se desava.

Zatim mozes preko css atributa position gde prvo definises tip pozicije, a zatim mozes da ga pomeris preko left i top atributa u odnosu na poziciju.

[ miki987 @ 15.01.2012. 16:02 ] @

kada pozovem 2 x css onda mi u html nastane cudo, svi tekstovi dobijaju skrol iako nema potrebe, slike se izmeste u prevodu kao da css vise ne postoji? o cemu se radi, moze li pomoc?

[ plague @ 15.01.2012. 16:51 ] @

Izbrisi nepotrebne redove iz tog CSS-a:

Code (html):

* {margin:0; padding:0}

body {font:12px Verdana,Arial; color:#555; background:#ddd}

p {line-height:1.4; margin-bottom:12px}

Ako to narusi slider, onda unutar slidera gde je potrebno dodeli neku klasu, a ovde preimenuj tako da ne utice na celu stranicu.

[ miki987 @ 15.01.2012. 19:24 ] @

sve radi osim jedne stvari :D ne mogu da spustim poziciju top:170px;

Code:
<div id="wrapper" style="margin-left:170px; margin-top:170px;">

Java Image Slider - pocetnik

Java Image Slider - pocetnik