[ kaoCR7 @ 10.09.2014. 02:59 ] @
<div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
<div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
Pod kojim argumentima da u klasi stila definisem data-x,data-y,data-transition?
Kako da ucitam ovu sliku?
Pokusao sam <div> <img src="putanja" width="100" height="100"> </div> i nece.Do sada se nisam susretao sa ovim data-iview-om.
Molim pomoc ako nije problem u kodu ili jednostavno objasnjenje o tom sta konkretno uraditi?
Hvala.
Pozzz
[ plus_minus @ 10.09.2014. 04:53 ] @
html5 custom data atribut se koristi sa malom dozom "custom" javaskripte. Dakle, ako to što želiš, pokušavaš bez dodatnog .js koda onda stani i prvo izguglaj kako to radi (evo), pa se onda igraj sa tim atributom. Što se tiče slike, u html5, nema width i height već samo style ili staviš u eksternom css-u zajedničko pravilo za img tag i onda opciono lepiš klase, pa tako rešavaš različite dimenzije.

Code (html):

<img src="/path/to/image.jpg" alt="alternative_name" title="Image Title" style="width: 320px; height: 200px;">
 


A što se foruma (bilo kog) tiče, onda kada lepiš kod, uokviri taj kod u BBcode tagove, trudi se da ti poruke NE izgledaju kao ova na koju odgovaram.
[ kaoCR7 @ 11.09.2014. 06:56 ] @
Prvo hvala na prethodnom odgovoru.
A sada jos jedno pitanje,ako nije problem?
A kako da u css-u definisem data-x i data-x atribute kao i transition atribut?
Pokusao am ovako:
Code:

.slika {
    background-position: 20px 240px; / naravno nisam istovremeno koristio background-position i margin-top/left
    margin-top: 240px; //*koristio sam razmak od margina jer mi se slika nalazi u ap tagu
    margin-left: 20px;
}

Koja je kljucna rec za transition u klasi?
Hvala unapred.
Pozz
[ plus_minus @ 16.09.2014. 23:00 ] @
Nema na čemu.

evo

Code (html):

<html>
<head>
<style type="text/css">

/*
 Tranzicija bez prefiksa.
 svaki element + sva pravila
 koja podržavaju tranzicije.
 */

*
{
 transition: all 280ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

/* data-rel */

article::before
{
  content: attr(data-rel);
}

</style>
</head>
<body>
<article
 id="_4wd"
 data-columns="3"
 data-index-number="12314"
 data-rel="cars">
  <dl><dt></dt><dd></dd></dl>
</article>
</body>
</html>

 


Za dalje imaš ispod.

CSS | MDN
CSS Tricks