• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Carousel Slider mit Navigation, den Bildern ein eigener Link geben?

Publisher

Neues Mitglied
(Gelöst) Carousel Slider mit Navigation, den Bildern ein eigener Link geben?

Hallo Zusammen!

Slider (der Grosse in der Mitte): Dermastars Shop

Ich habe hier diesen Script verwendet, wie kann ich jedem Bild eine Verlinkung zuweisen? Oder wie soll ich das anders umsetzen? Er soll dann aber immer noch die back-forward funktion, autoslideshow und navigation haben.

Danke schon im Voraus für die Feedbacks!

Code:
<script type="text/javascript">




                        $(document).ready(function() {                          
                                // Initialize Minimal Galleriffic Gallery
                                $('#thumbs').galleriffic({
                                        imageContainerSel:      '#slideshow',
                                        controlsContainerSel:   '#controls',
                                        autoStart:               true,
                                        delay:                     5000
                                });
                        });
</script>
            <div id="gallery" class="content">
                
                <div class="button_fade_fix">
                    <img class="prev" src="/themes/modified/img/bannernavig_left.png" alt="" />
                    <img class="next" src="/themes/modified/img/bannernavig_right.png" alt="" />
                </div>
                
                                        <div id="controls" class="controls"></div>
                                        <div class="slideshow-container">
                                                <div id="loading" class="loader"></div>
                                                <div id="slideshow" class="slideshow"></div>
                                        </div>
                                </div>
                                <div id="thumbs" class="navigation">
                                        <ul class="thumbs noscript">
<li><a class="thumb" href="/themes/modified/img/banner_sliders/Banner-Dermaroller.jpg">1</a></li>
<li><a class="thumb" href="/themes/modified/img/banner_sliders/Banner-Image.jpg">2</a></li>
<li><a class="thumb" href="/themes/modified/img/banner_sliders/Banner-MagicNeedle.jpg">3</a></li>
<li><a class="thumb" href="/themes/modified/img/banner_sliders/Banner-Revitacare.jpg">4</a></li>
<li><a class="thumb" href="/themes/modified/img/banner_sliders/Banner-Stylage.jpg">5</a></li>
                                        </ul>
                                </div>
 
Zuletzt bearbeitet:
Werbung:
Das wird wahrscheinlich nicht so einfach gehen, weil die Bilder bei diesem Slider als a-href-Tags abgelegt sind. Wahrscheinlich musst Du dich nach einem anderen Slider umsehen. Hier sind zwei Sammlungen aus meinen Lesezeichen:

25 Best Examples of Free jQuery Content Sliders
Von diesen käme Revolver in Frage.
Oder Nivo-Slider mit Thumbnails:
http://nivo.dev7studios.com/demos/4/
Wenn Du bei den Nummern bleiben willst, kannst Du entspr. Grafiken als Thumbnails verwenden.


15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials - Speckyboy Design Magazine

Oder dieses in Flash:
http://www.flabell.com/flash/XML-Banner-Rotator-233

Oder das jQuery-Cycle-Plugin:
http://jquery.malsup.com/cycle/int2.html

Viele Grüße - Ulrich
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Zurück
Oben