Accordion Register mit jeweils anderem Bild?

[Taucherglocke]

Abend zusammen,

Ich bastle gerade (wer hätte es gedacht) an einer Website und fahr total auf das jQuery Accordion ab!
Habe das mal auf irgendeiner Seite gesehen (zwischenzeitlich natürlich auf mehreren ^^) und wollte das sofort verwenden.
Jedenfalls ist mein "Problem" folgendes:
Ich hätte gerne das wenn ein Accordion Register sich aufschiebt, dass rechts davon ein Bild aufgebaut wird
und für jedes Register eben ein anderes Bild. Beispiel http://www.luethen-immobilien.de/leistungen/fuer-eigentuemer/

Ich weis jetzt nur nicht wie ich das am besten angehe, kann mir da jemand helfen?:-)

Vielen dank!

Sebastian

 

[Tronjer]

Kommt drauf an, was du willst. Bei der von dir verlinkten Seite korrespondiert zusätzlich noch ein Slider mit dem Akkordion. Wobei das Skript nicht wirklich professionell ist.

Für das Akkordion könntest du das Widget von jQuery UI einsetzen und eine der in der API Doku beschriebenen Methoden dafür verwenden, um zusätzlich noch ein Click-Event einzubauen, welches das Bild im rechten Container tauschst.

Oder du baust du dir ein eigenes Akkordion mit slideToggle(). Beim Click auf eines der Register werden alle anderen geschlossen, das jeweils angeklickte geöffnet und das rechte Bild getauscht. Das ist eigentlich recht simpel und erspart die Einbindung einer zusätzlichen Bibliothek.

Dritte Variante wäre die Kombination mit dem Slider, wo das Akkordeon auf den Bildwechsel reagiert. Im einfachsten Fall suchst du dir dazu einen fertigen jQuery-Slider, welcher gleich eine Callback-Funktion mitbringt, auf die sich der Wechsel aufrufen lässt.

 

[Taucherglocke]

Moin,

also das jQuery Accordion habe ich bereits eingebunden, funktioniert soweit auch sehr gut, jedoch weis ich überhaupt nicht wo genau ich in der API suchen muss, bzw. was!
Vielleicht poste ich einfach mal die Seite:

http://sebastian-fritsch.net/leistungen.html

Ich mache das eben für die Firma von meinem Vater und wollte eben zu den verschiedenen Rubriken wie Tiefbau, Straßenbau, etc. immer ein Bild mit einer Baustelle usw. nebendran erscheinen lassen, eben passend zum jeweiligen Bereich ;-)

 

[Tronjer]

In der Doku des Widgets werden Events wie create() und activate() erwähnt.

Oder du baust dir ein separates Event. Jede <h3> innerhalb des Akkordions besitzt eine ID mit aufsteigender Nummer als letztem Char. Diese IDs ließen sich durch einen Array Split extrahieren, um so einen eindeutigen Identifier für die Bilder zu schaffen, die analog zu den Zahlen benannt werden müssen. Also 0.jpg, 1.jpg, ....

Beim Klick auf eine <h3> wird der jeweilige Bildname dann in das src-Attribut des Image-Tags innerhalb #pic_aside geschrieben.

Pattern (ungetestet):

$('body').on('click', '#akkordion h3', function() {
  var img = $(this).prop('id');
  img.split('-');
  $('.pic_aside img').prop('src', img[img.length - 1] + '.jpg');
})

Wobei die Bilder auf diese Weise kein Alt-Attribut besitzen. Besser wäre es, ein Array mit Bildnamen zu erstellen und die Namen korrespondierend mit dem Index zu übergeben. Also, beim Klick auf die erste <h3> innerhalb des Akkordions weise das erste Array-Element dem src-Attribut zu.

Wenn du länger nachdenkst, fällt dir sicher noch mehr ein. ;)