das jQuery plugin liteAccordion bietet eine vielseitig konfigurierbares, horizontales accordion.
für die konfiguration des accordions (die bilder, den text, die textposition, die lLinks usw). wird ein ein xml-dokument verwendet.
jQuery (verwendete version 1.7.2) parst die xml-datei, erstellt mit den daten die listenelemente und initialisiert das liteAccordion.
die datei liteaccordion.jquery.js (Version 2.0.2) muss an folgenden stellen editiert werden:
+/- linie 45:slideWidth = settings.containerWidth - slideLen * settings.headerWidth
ersetzen mitfactor = slides.length - 1,
slideWidth = (settings.containerWidth - factor * settings.headerWidth)
+/- linie 152:if (index >= settings.firstSlide) left += slideWidth;
ersetzen mitif (index >= settings.firstSlide) left += slideWidth - settings.headerWidth;
+/- linie 243:.animate({ left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth }
ersetzen mit.animate({ left : (side ? 0 : slideWidth-settings.headerWidth) + slideIndex * settings.headerWidth }
die xml-datei:
<?xml version="1.0" encoding="UTF-8"?>
<data
version="1"
date="2012-10-15"
openid="2"
appwidth="720"
appheight="320"
headerwidth="40"
speed="1900"
easing="easeOutQuart"
activate="mouseover"
debug="true"
>
<!-- DEUTSCH -->
<sliders id="de">
<slider id="0" image="img/sliders/img1.jpg" style="white" textx="70" texty="10" textw="190">
<title><![CDATA[Löwen]]></title>
<lead><![CDATA[]]></lead>
<subtitle><![CDATA[]]></subtitle>
<body><![CDATA[Ruhende Löwen, Tansania]]></body>
<links>
<link
kind="web"
target="_blank"
url="http://photography.nationalgeographic.com/photography/photo-of-the-day/resting-lions-tanzania/">
<![CDATA[Nationalgeographic]]>
</link>
</links>
</slider>°
<slider id="1" image="img/sliders/img2.jpg" style="white" textx="80" texty="200" textw="260">
…
in der xml-datei ist der inhalt in 2 sprachen (de und en) definiert. beim aufruf der index.html wird mit js die sprache im browser ausgelesen und anschliessend der entsprechende inhalt gelesen.
demo (-> browser sprachen wechslen)
gut zu wissen:
– beim testen im ie, konsole geöffnet oder debug auf false setzen
– testen im ie 8 -> https://github.com/nikki/liteAccordion/issues/39
– link-url im xml: & durch &s; ersetzen (-> details)
code zum download