galerija

17 views
Skip to first unread message

subotic.sonja

unread,
Jul 31, 2015, 10:25:20 AM7/31/15
to Rails Girls Beograd
Molim Vas da mi date komentare na skript. Pokusala sam da napravim galeriju na vec gotov sajt (u html i css) i nije lose ispalo. Verovatno ima problema sa pozicioniranjem u zavisnosti od velicine monitora i pretrazivaca. Moje glavno pitanje je kako da napravim navigaciju za velike fotografije (preview fotografje) da mogu da se listaju, da kada se klikne na veliku fotografiju pojavi se sledeca velika fotografija. Da li bi to moglo da se izvede u html, ili mora da se koristi javascript?  Hvala unapred i pozdrav.
To izgleda ovako:
http://www.ultramedika.rs/galerija.php



A u kodu ovako:



(Heder i footer su vec bili u php, samo sam ubacila ime stranice u navigaciju sajta)

<?php
    $naslov = "Galerija | Ultramedika, specijalistička ordinacija";   
    include_once("ukljuci/header.php");
?>



<div class="iznad-podnozja granicnik">
  <h1>Galerija</h1>
<html>
<style type="text/css">
 img {
    position: floating center;
    padding:20 px solid #fffffff;
    border: 1px solid #000000;
    margin: 1%;
     
}

div#red1 img {

position: floating center;

}

div#red2 {

clear:both;
}

div#red2 img {

position: floating center;
}



.div#red3 img {
 position: floating center;
 
}
.div#red4 img {
 position:  floating center;
  
}
.preview {
       position: floating center;
   
 }
}
 
</style>
    
<body>
<div>
<a href="preview/preview1.jpg" target="_blank"><img src="thumb/thumb1.jpg";id="red1" /></a>
<a href="preview/preview4.jpg" target="_blank"><img src="thumb/thumb4.jpg";id="red1" /></a>
<a href="preview/preview5.jpg" target="_blank"><img src="thumb/thumb5.jpg" ;id="red1"/></a>
<a href="preview/preview2.jpg" target="_blank"><img src="thumb/thumb2.jpg";id="red2" /></a>
<a href="preview/preview10.jpg" target="_blank"><img src="thumb/thumb10.jpg";id="red2" /></a>
<a href="preview/preview8.jpg" target="_blank"><img src="thumb/thumb8.jpg" ;id="red2"/></a>
<a href="preview/preview10.jpg" target="_blank"><img src="thumb/thumb10.jpg";id="red3" /></a>
<a href="preview/preview3.jpg" target="_blank"><img src="thumb/thumb3.jpg" ;id="red3"/></a>
<a href="preview/preview6.jpg" target="_blank"><img src="thumb/thumb6.jpg" ;id="red3"/></a>
<a href="preview/preview11.jpg" target="_blank"><img src="thumb/thumb11.jpg";id="red4" /></a>
<a href="preview/preview7.jpg" target="_blank"><img src="thumb/thumb7.jpg" ;id="red4"/></a>
<a href="preview/preview9.jpg" target="_blank"><img src="thumb/thumb9.jpg" ;id="red4"/></a>
</div>

<div id="red1"></div>
<div id="red2"></div>
<div id="red3"></div>
<div id="red4"></div>

</div>
</body>
</html>

 

       
<?php include_once("ukljuci/footer.php"); ?>

Ana Radovanovic

unread,
Jul 31, 2015, 10:31:30 AM7/31/15
to subotic.sonja, Rails Girls Beograd

Zdravo Sonja,
Preletela sam pogledom sajt i kod,posto je preko mob
Da li si pokusala da implementiras neki jQuery? Probaj nivoslider on bi trebao i da je responsive.
Pozdrav,


--
Ову поруку сте добили због тога што сте се пријавили у групу „Rails Girls Beograd“ у Google групама.
Да бисте отказали пријаву у ову групу и престали да примате имејлове од ње, пошаљите имејл на rails-girls-beo...@googlegroups.com.
За више опција, посетите https://groups.google.com/d/optout.

Mladen Danic

unread,
Jul 31, 2015, 10:32:59 AM7/31/15
to Ana Radovanovic, subotic.sonja, Rails Girls Beograd

Mladen Danić

Sonja Subotić

unread,
Jul 31, 2015, 10:57:33 AM7/31/15
to Mladen Danic, Ana Radovanovic, Rails Girls Beograd
Auuu, to zvuci jos komplikovanije od js. Sacu da vidim!
Hvalaaaa!

Mladen Danic

unread,
Jul 31, 2015, 12:19:30 PM7/31/15
to Sonja Subotić, Ana Radovanovic, Rails Girls Beograd
jQuery ustvari jeste js. To je js biblioteka koja bi trebalo da ti olaksa rad u js u nekim situacijama.

Mladen Danić

Ana Radovanovic

unread,
Jul 31, 2015, 2:39:03 PM7/31/15
to subotic. sonja, Rails Girls Beograd, maid...@gmail.com

Sonja, procitaj API. Bice ti jasnije na koji nacin funkcionise. Nivo slider i bx.slider su ti ok za implementaciju.

Sonja Subotić

unread,
Jul 31, 2015, 8:25:28 PM7/31/15
to Ana Radovanovic, Rails Girls Beograd, Mladen Danic
Zez je sto hocu da spojim a blank pages, ali ne uspevam da definisem src (da li sa html ili ipak jpg??) Ili?... јQuery mi je potpuno nov...

Iva Dopuđ

unread,
Aug 1, 2015, 2:17:13 AM8/1/15
to Sonja Subotić, Ana Radovanovic, Rails Girls Beograd, Mladen Danic
Kopiraj ovde deo koda koji te muči, da vidimo konkretno.
Od: Sonja Subotić
Poslato: ‎01.‎08.‎2015. 2:25
Za: Ana Radovanovic
Cc: Rails Girls Beograd; Mladen Danic
Tema: Re: galerija

Sonja Subotić

unread,
Aug 4, 2015, 4:03:27 PM8/4/15
to Ana Radovanovic, rails-girls-be., Mladen Danic, Iva Dopuđ
Izvnite na mojoj usporenosti, moram i da idem na posao. Vi ITjevci ste stalno pored kompjutera. Sad cu da isprobam.         
 :)

2015-08-04 13:45 GMT+01:00 Ana Radovanovic <ana.radov...@gmail.com>:

Sve sto je vezano za js i jQuery kao js biblioteku moras definisati kao <script>.

On Aug 4, 2015 2:43 PM, "Ana Radovanovic" <ana.radov...@gmail.com> wrote:

Je l si ubacila jquery kao script?


On Tue, Aug 4, 2015, 2:41 PM Mladen Danic <maid...@gmail.com> wrote:
Uzrok problema:

<style type="text/css">

$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});

</style>

Stavila si javascript u stilove.

Mladen Danić

2015-08-04 14:39 GMT+02:00 Sonja Subotić <suboti...@gmail.com>:
Sve me muci. Najnoviji plan je da pokusam da kopiram bx.slider po Aninoj preporuci. Procedura je takva da daunlodujem folder koji u sebi sadrzi jedan css i dva js fajla plagin sa dva jc fajla i slike strelica.
http://bxslider.com/examples
ja sam izabrala pod 3 http://bxslider.com/examples/manual-show-without-infinite-loop
Tu su dva koda
js
$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
i html
<ul class="bxslider">
  <li><img src="/images/730_200/hill_trees.jpg" /></li>
  <li><img src="/images/730_200/me_trees.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
</ul>

Nasla sam i uputstvo. http://bxslider.com/ I onda ubacujem

<?php
    $naslov = "Galerija | Ultramedika, specijalistička ordinacija";   
    include_once("ukljuci/header.php");
?>



<div class="iznad-podnozja granicnik">
  <h1>Galerija</h1>
<html>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<style type="text/css">
 img {
    position: floating center;
    padding:20 px solid #fffffff;
    border: 1px solid #000000;
    margin: 1%;
     
}

div#red1 img {

position: floating center;

}

div#red2 {

clear:both;
}

div#red2 img {

position: floating center;
}



.div#red3 img {
 position: floating center;
 
}
.div#red4 img {
 position:  floating center;
  
}
.preview {
       position: floating center;
   
 }
}
 
</style>
    
<body>
<div>
<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
 <li><img src="/images/pic5.jpg" /></li>
 <li><img src="/images/pic6.jpg" /></li>
 <li><img src="/images/pic7.jpg" /></li>
 <li><img src="/images/pic8.jpg" /></li>
 <li><img src="/images/pic9.jpg" /></li>
 <li><img src="/images/pic10.jpg" /></li>
 <li><img src="/images/pic11.jpg" /></li>
 <li><img src="/images/pic12.jpg" /></li>
 </ul>
</div>


<style type="text/css">

$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});

</style>

<div>
<a href="preview/preview1.jpg" target="_blank"><img src="thumb/thumb1.jpg";id="red1" /></a>
<a href="preview/preview4.jpg" target="_blank"><img src="thumb/thumb4.jpg";id="red1" /></a>
<a href="preview/preview5.jpg" target="_blank"><img src="thumb/thumb5.jpg" ;id="red1"/></a>
<a href="preview/preview2.jpg" target="_blank"><img src="thumb/thumb2.jpg";id="red2" /></a>
<a href="preview/preview10.jpg" target="_blank"><img src="thumb/thumb10.jpg";id="red2" /></a>
<a href="preview/preview8.jpg" target="_blank"><img src="thumb/thumb8.jpg" ;id="red2"/></a>
<a href="preview/preview10.jpg" target="_blank"><img src="thumb/thumb10.jpg";id="red3" /></a>
<a href="preview/preview3.jpg" target="_blank"><img src="thumb/thumb3.jpg" ;id="red3"/></a>
<a href="preview/preview6.jpg" target="_blank"><img src="thumb/thumb6.jpg" ;id="red3"/></a>
<a href="preview/preview11.jpg" target="_blank"><img src="thumb/thumb11.jpg";id="red4" /></a>
<a href="preview/preview7.jpg" target="_blank"><img src="thumb/thumb7.jpg" ;id="red4"/></a>
<a href="preview/preview9.jpg" target="_blank"><img src="thumb/thumb9.jpg" ;id="red4"/></a>
</div>

<div id="red1"></div>
<div id="red2"></div>
<div id="red3"></div>
<div id="red4"></div>

</div>
</body>
</html>

 

       
<?php include_once("ukljuci/footer.php"); ?>
I nece :(

Sonja Subotić

unread,
Aug 4, 2015, 5:59:01 PM8/4/15
to Ana Radovanovic, rails-girls-be., Mladen Danic, Iva Dopuđ
Kao da ne radi script. :(
<head>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<script>

$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
</script>

</head>
     
      
<body>



<div>

<ul class="bxslider">
  <li><img src="/pic/pic1.jpg" /></li>
  <li><img src="/pic/pic2.jpg" /></li>
  <li><img src="/pic/pic3.jpg" /></li>
 
 </ul>
</div>
galerija print screen.JPG

Sonja Subotić

unread,
Aug 4, 2015, 6:26:11 PM8/4/15
to Ana Radovanovic, rails-girls-be., Mladen Danic, Iva Dopuđ
I puno vam hvala. :*

Mladen Danic

unread,
Aug 5, 2015, 2:11:14 AM8/5/15
to Sonja Subotić, Ana Radovanovic, rails-girls-be., Iva Dopuđ
postavi to na neki hosting na netu, pa da vidimo. Imas i neke free varijante ako nemas svoj. Ja sam ranije koristio ovo:
http://www.freehostia.com/index2.html

Mladen Danić

Sonja Subotić

unread,
Aug 5, 2015, 7:08:32 PM8/5/15
to Mladen Danic, Ana Radovanovic, rails-girls-be., Iva Dopuđ
Ne umem :( Probala sam da postavim putem freehosta... Verovatno mi treba vise vremena da provalim ftp, etc.

Mladen Danic

unread,
Aug 6, 2015, 2:21:08 AM8/6/15
to Sonja Subotić, Ana Radovanovic, rails-girls-be., Iva Dopuđ
Hahahaha. Probaj ponovo od nule. Nije tako tesko. Registrujes besplatan nalog, dobijes pristupne podatke. Skines neki ftp klijent kao sto je FIleZilla, ulogujes se sa tim podatcima. Uploadujes fajlove sa lokalnog servera na remote, i to je to. Trebalo bi da odmah vidis to sto si radila na svom freehostia poddomenu (ili sta vec koristis).

Mladen Danić

Ирена Буш

unread,
Aug 6, 2015, 4:02:09 AM8/6/15
to Sonja Subotić, Ana Radovanovic, Rails Girls Beograd, Mladen Danic
https://devcenter.heroku.com/start

Izabere se ikonica jezika koji se koristi i onda se prikaze odgovarajuce uputstvo.

Sonja Subotić

unread,
Aug 6, 2015, 7:47:31 AM8/6/15
to Ирена Буш, Ana Radovanovic, Iva Dopuđ, Mladen Danic, rails-girls-be.
:)  Cim pre!

Iva Dopudj

unread,
Aug 18, 2015, 6:25:57 AM8/18/15
to Jelena Mitrovic, Sonja Subotić, Ирена Буш, Ana Radovanovic, Mladen Danic, rails-girls-be.
Evo ovde može da se nauči jQuery i još koješta drugo, besplatno.
Jelena, probaj?

On Fri, Aug 7, 2015 at 8:36 PM, Jelena Mitrovic <jec...@gmail.com> wrote:
Evo malo inspiracije:


Pozdrav,
Jelena
Jelena Mitrovic, PhDc
University of Belgrade

Iva Dopudj

unread,
Aug 18, 2015, 6:26:26 AM8/18/15
to Jelena Mitrovic, Sonja Subotić, Ирена Буш, Ana Radovanovic, Mladen Danic, rails-girls-be.
Ups, htedoh reći Sonja probaj!
Reply all
Reply to author
Forward
0 new messages