Lag hvilkensomhelst tag med attributtene høyde og luft.
Fyll den opp med semikolonseparert liste av ider til bilder eller kommaseparert sett med id og tekst.
Merk: initialHeight er kun for å ha et utgangspunkt, og kunne sende til bildegenerator.
Høyde blir satt på nytt når bredde er funnet.
| Debug | http://common.syzweb.no/jquery.imagestrip/jquery.imagestrip.js |
| Minified | http://common.syzweb.no/jquery.imagestrip/jquery.imagestrip-min.js |
| hoyde | Sendes til bildetag mal (imageTemplate option) og brukes som utgangspunkt for beregninger. |
| luft | Luft mellom hvert element i pixler. |
| imageTemplate |
Mal for bildetag, evt. container med bilde inni. {0} byttes ut med verdi fra semikolonseparert liste. {1} byttes ut med teksten etter komma. {2} byttes ut med høyde. |
<script type="text/javascript" src="http://common.syzweb.no/jquery.imagestrip/jquery.imagestrip-min.js"></script>
<style type="text/css">
.imagestrip
{
overflow:hidden;
white-space: nowrap;
width: 600px;
height: 0px;
border: 1px solid black;
padding: 16px;
}
img
{
border: 0px;
}
</style>
<bildestripe høyde="400" luft="10">IMAG0153.jpg,Hei hei;IMAG0155.jpg;IMAG0156.jpg;IMAG0160.jpg</bildestripe>
<script type="text/javascript">
$("bildestripe").imagestrip({
imageTemplate:
"<a href=\"@Url.Content("~/Content/Images/"){0}\" title=\"{1}\">" +
"<img src=\"@Url.Content("~/Content/Images/"){0}\" title=\"{1}\" alt=\"{1}\" style=\"height:{2}px\"/>" +
"</a>"
});
$(".imagestrip a").colorbox({
maxWidth: 800,
maxHeight: 600
});
</script>