Hogy tudnám ezt responsive-é tenni?
Adott egy slider.
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1150, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[" [link]
[" [link]
[" [link]
[" [link] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
Ha a div-nek, ami ezt tartalmazza, annak adok meg megfelelő értékeket az nem ér semmit.
Itt feljebb meg van adva a kép méret, ami fix marad.
Itt nem írhatok be mást csak sima számokat.
Neten próbáltam keresni másik slidereket, de egyik sem működik úgy, ahogy kellene.
Ezeknek szépen csökkent a méretük, de nem váltottak képet. :S
Tehát egy reszponzív képváltóra lenne szükségem.
Elég kezdő vagyok még e téren.
Köszönöm
válasza: válasza:Itt a dokumentáció[1] a linkelt cucchoz, váltja a képet, elsőre valószínűleg kihagytál/elírtál valamit.
[1]: [link]
válasza:a responsivitás lényege az hogy minden felbontás alatt "évezhető" maradjon a weblap. Itt lényegesen fontos az hogy a méreteket SZÁZALÉKBAN add meg. Így ha csökken a mérete a böngészőnek akkor is "élvezhető" marad a weblap.
Ajánlom figyelmedbe a @madia(){} css-es media-qyuery-t amibe beirhatod, hogy pl mekkora legyen a a minimum szélesség vagy a maximum szélesség amig egy adott beállítás tartson
pl
@media(max-width : 600px){
body{ background-color:red; }
}
@media(min-width : 600px){
body{ background-color: blue; }
}
amig a böngésződ szélessége kissebb mint 600 px addig piros a body háttérszíne, aming nagyobb kék. Innentől jöhet a js-es léptetés ami már nem nehéz ;) a képek béretét is %-ban add meg. itt szokás még egy meta taget megadni ami nem más mint a view port
<meta name="viewport" content="width=device-widthminimum-scale=1;maximum-scale=1;user-scalable=no">
a wviewporthoz több magyarázat:
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!