Hallo Leute,
ich bin sehr unerfahren was das Programmieren mit Javascript angeht, daher habe ich mir gedacht hole ich mir rat bei euch hier im Forum.
Es geht um folgendes Problem:
Ich möchte einen Image Slider erstellen der wie folgt auf der Seite aufgebaut ist.
auf der linken Seite sind 10 quadratische Thumbnail Bilder untereinander in einer zweier Reihe angeordnet. Direkt rechts daneben ist dann das große Image mit einer Bildbeschreibung darunter zu sehen. Diese ändern sich beim klick auf das entsprechende Thumbnail.
Hier ist der Code den ich dafür benutzt habe.
<div id="content">
<div id="thumb">
<h2>Illustration</h2>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_01.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Der Mann auf dem Mond'; document.getElementById('subline').firstChild.nodeValue = 'Mann auf dem Mond - Illustration für ein Kidnerbuch'"> <img src="_img/_portfolio/_illustartion/_klein/slider_1_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_02.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Die Nordmanntanne'; document.getElementById('subline').firstChild.nodeValue = 'Nordmanntanne - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_2_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_2_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_2_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_03.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Einer dieser Tage'; document.getElementById('subline').firstChild.nodeValue = 'Einer dieser Tage - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_3_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_3_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_3_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_04.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Klaus ging raus'; document.getElementById('subline').firstChild.nodeValue = 'Kinderbuch Illustration'"> <img src="_img/_portfolio/_illustartion/_klein/slider_4_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_4_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_4_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_05.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Muddi'; document.getElementById('subline').firstChild.nodeValue = 'Muddi - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_5_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_5_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_5_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_06.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Spalding Session'; document.getElementById('subline').firstChild.nodeValue = 'Vektor Illustation für eine Musik Veranstaltungsreihe'"> <img src="_img/_portfolio/_illustartion/_klein/slider_6_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_6_klein.jpg'" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
</div>
<div id="slider_bg">
<div id="part_right*">
<div id="preview">
<a><img src="_img/_portfolio/_illustartion/_gross/_illustration_gross_01.jpg" name="big_women" title="Preview" alt="Product Preview" /></a>
</div>
</div>
<div id="bild_titel" name="text">
<h1 id="headline">Der Mann auf dem Mond</h1>
<p id="subline">Mann auf dem Mond - Illustration für ein Kidnerbuch</p>
</div>
</div>
</div>
Das ist alles schon sehr schön so, nur möchte ich nun noch, dass wenn ich auf eines der Thumbnails geklickt habe, sich dann, dort wo normalerweise das große Image eingeblendet wird ein Image Slider öffnet, der es mir erlaubt ein paar Bilder (3-4) anzusehen.
Sprich im Klartext, sind die Thumbnails nur ein Link zu einer Kategorie in der sich dann ein Slider öffnet.
Hier ist auch noch einmal die Internetseite soweit wie ich sie nun habe.
http://lukassimon.com/der_such/illustration.html
Ich hoffe ich habe mich verständlich genug ausgedrückt. Und ich hoffe das ihr mir eventuell helfen könnt das Problem zu lösen.
Vielen Dank schon mal !
Ahoi!
ich bin sehr unerfahren was das Programmieren mit Javascript angeht, daher habe ich mir gedacht hole ich mir rat bei euch hier im Forum.
Es geht um folgendes Problem:
Ich möchte einen Image Slider erstellen der wie folgt auf der Seite aufgebaut ist.
auf der linken Seite sind 10 quadratische Thumbnail Bilder untereinander in einer zweier Reihe angeordnet. Direkt rechts daneben ist dann das große Image mit einer Bildbeschreibung darunter zu sehen. Diese ändern sich beim klick auf das entsprechende Thumbnail.
Hier ist der Code den ich dafür benutzt habe.
<div id="content">
<div id="thumb">
<h2>Illustration</h2>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_01.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Der Mann auf dem Mond'; document.getElementById('subline').firstChild.nodeValue = 'Mann auf dem Mond - Illustration für ein Kidnerbuch'"> <img src="_img/_portfolio/_illustartion/_klein/slider_1_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_02.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Die Nordmanntanne'; document.getElementById('subline').firstChild.nodeValue = 'Nordmanntanne - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_2_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_2_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_2_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_03.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Einer dieser Tage'; document.getElementById('subline').firstChild.nodeValue = 'Einer dieser Tage - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_3_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_3_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_3_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_04.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Klaus ging raus'; document.getElementById('subline').firstChild.nodeValue = 'Kinderbuch Illustration'"> <img src="_img/_portfolio/_illustartion/_klein/slider_4_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_4_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_4_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_05.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Muddi'; document.getElementById('subline').firstChild.nodeValue = 'Muddi - Freie Arbeit'"> <img src="_img/_portfolio/_illustartion/_klein/slider_5_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_5_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_5_klein.jpg'" /></a>
<a href="#" onclick="document.big_women.src='_img/_portfolio/_illustartion/_gross/_illustration_gross_06.jpg'; document.getElementById('headline').firstChild.nodeValue = 'Spalding Session'; document.getElementById('subline').firstChild.nodeValue = 'Vektor Illustation für eine Musik Veranstaltungsreihe'"> <img src="_img/_portfolio/_illustartion/_klein/slider_6_klein.jpg" onmouseover="this.src='_img/_portfolio/_illustartion/_klein/slider_1_klein_border.jpg'" onmouseout="this.src='_img/_portfolio/_illustartion/_klein/slider_6_klein.jpg'" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
<a href="#"><img src="_img/_portfolio/_illustartion/_klein/slider_none.jpg" /></a>
</div>
<div id="slider_bg">
<div id="part_right*">
<div id="preview">
<a><img src="_img/_portfolio/_illustartion/_gross/_illustration_gross_01.jpg" name="big_women" title="Preview" alt="Product Preview" /></a>
</div>
</div>
<div id="bild_titel" name="text">
<h1 id="headline">Der Mann auf dem Mond</h1>
<p id="subline">Mann auf dem Mond - Illustration für ein Kidnerbuch</p>
</div>
</div>
</div>
Das ist alles schon sehr schön so, nur möchte ich nun noch, dass wenn ich auf eines der Thumbnails geklickt habe, sich dann, dort wo normalerweise das große Image eingeblendet wird ein Image Slider öffnet, der es mir erlaubt ein paar Bilder (3-4) anzusehen.
Sprich im Klartext, sind die Thumbnails nur ein Link zu einer Kategorie in der sich dann ein Slider öffnet.
Hier ist auch noch einmal die Internetseite soweit wie ich sie nun habe.
http://lukassimon.com/der_such/illustration.html
Ich hoffe ich habe mich verständlich genug ausgedrückt. Und ich hoffe das ihr mir eventuell helfen könnt das Problem zu lösen.
Vielen Dank schon mal !
Ahoi!
