Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Java Image Slider - pocetnik

[es] :: Javascript i AJAX :: Java Image Slider - pocetnik

[ Pregleda: 2499 | Odgovora: 14 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Java Image Slider - pocetnik11.01.2012. u 21:48 - pre 148 meseci
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}

Prikačeni fajlovi
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 09:48 - pre 148 meseci
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.
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 11:23 - pre 148 meseci
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?
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 11:58 - pre 148 meseci
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.
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 12:05 - pre 148 meseci
Citat:
<script type="text/javascript" src="script.js"></script>


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

Citat:
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>

 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 12:07 - pre 148 meseci
Apsolutno da. :]
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 12:31 - pre 148 meseci
sve ovo sam skapirao i radi osim pozicioniranja slider-a :D
moze pomoc, molim te pogledaj
Prikačeni fajlovi
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 13:39 - pre 148 meseci
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?

 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 13:56 - pre 148 meseci
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
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 14:45 - pre 148 meseci
Evo ti primer, pogledaj source kod i videces kako sam ubacio ceo slider unutar sekcije koju sam izabrao.
Prikačeni fajlovi
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 14:55 - pre 148 meseci
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]
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.adsl.verat.net.



+373 Profil

icon Re: Java Image Slider - pocetnik12.01.2012. u 16:11 - pre 148 meseci
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">
 

u
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.
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik15.01.2012. u 16:02 - pre 148 meseci
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?
 
Odgovor na temu

plague
Software Developer
Auckland, NZ

Član broj: 46734
Poruke: 623
*.aDSL.Verat.Net.



+373 Profil

icon Re: Java Image Slider - pocetnik15.01.2012. u 16:51 - pre 148 meseci
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.
 
Odgovor na temu

miki987

Član broj: 208123
Poruke: 511
*.bitinfo.rs.



+5 Profil

icon Re: Java Image Slider - pocetnik15.01.2012. u 19:24 - pre 148 meseci
sve radi osim jedne stvari :D ne mogu da spustim poziciju top:170px;


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

[es] :: Javascript i AJAX :: Java Image Slider - pocetnik

[ Pregleda: 2499 | Odgovora: 14 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.