OnlineWebService Webmaster Foren     Zu OnlineWebService.de - Gästebücher, Flash Gästebücher, Foren, Umfragen, Counter

Zurück   OnlineWebService Webmaster Foren > OWS Webmaster Foren > HTML, JavaScript, CSS

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 15.12.2010, 13:13
phppower phppower ist offline
Neuer Benutzer
 
Registriert seit: 15.12.2010
Beiträge: 1
Standard Bilderverlinkung mit externem Link im jarousel

Hallo,
vielleicht kann mir ja jemand helfen. Ich habe folgendes Problem: Voransicht wenn man in der mitte auf die großen Grafiken klickt reagieren diese wie oben und gehen zum nächsten Bild. Ich möchte aber das die großen Grafiken extern verlinkt werden. Meine javascript Kenntnisse halten sich da etwas in Grenzen deswegen hier mal mein code.
1. HTML Code der Bilder Verlinkung
PHP-Code:
<div id="wrapper">
<
ul id="gallery" class="jcarousel-skin-tango">
               <
li>
<
a href="i/photos/1.jpg" title="auktioneros18.de"><img src="i/thumbs/1.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/2.jpg" title="gayseros18.de"><img src="i/thumbs/2.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/3.jpg" title="flirteros18.de"><img src="i/thumbs/3.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/4.jpg" title="heteroeros18.de"><img src="i/thumbs/4.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/5.jpg" title="inserateros18.de"><img src="i/thumbs/5.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/6.jpg" title="lesbeneros18.de"><img src="i/thumbs/6.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/7.jpg" title="joberos18.de"><img src="i/thumbs/7.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/8.jpg" title="shoperos18.de"><img src="i/thumbs/8.png" width="72" height="34" alt="" /></a></li>
                <
li><a href="i/photos/9.jpg" title="transeneros18.de"><img src="i/thumbs/9.png" width="72" height="34" alt="" /></a></li>
            </
ul><br />
<
div id="img"></div>
                        
        </
div>
2. Javascript Code
PHP-Code:
$(function(){
    $(
'#gallery li').each(function(idx) {
        $(
this).data('index', (++idx));
    });

    $(
'#gallery').jcarousel({
        
scroll: 5,
        
initCallback: initCallbackFunction
    
})
    
    function
initCallbackFunction(carousel) {
        $(
'#img').bind('image-loaded',function() {
            var
idx =  $('#gallery li.active').data('index') - 2;
            
            
carousel.scroll(idx);
            return
false;
        });
        
        
// hotkeys plugin: use arrows to control the gallery
       
$(document).bind('keydown', 'right', function (evt){ $.galleria.next(); });
       $(
document).bind('keydown', 'left', function (evt){ $.galleria.prev(); });
        $(
document).bind('keydown', 'up', function (evt){ $('.jcarousel-next-horizontal').click(); return false; });
        $(
document).bind('keydown', 'down', function (evt){ $('.jcarousel-prev-horizontal').click(); return false; });
    };

    
// load and fade-in thumbnails
    
$('#gallery li img').css('opacity', 0).each(function() {    
        if (
this.complete || this.readyState == 'complete') { $(this).animate({'opacity': 1}, 300) }
        else { $(
this).load(function() { $(this).animate({'opacity': 1}, 300) }); }
    });

    
    $(
'#gallery').galleria({
        
// #img is the empty div which holds full size images
        
insert: '#img',
        
        
// enable history plugin
        
history: true,
        
        
// function fired when the image is displayed
        
onImage: function(image, caption, thumb) {        
            
// fade in the image
            
image.hide().fadeIn(500);
            
            
// animate active thumbnail's opacity to 1, other list elements to 0.6
            
thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.6)
            
            
// $('#img').data('currentIndex', $li.data('index')).trigger('image-loaded')
            
            
$('#img')
                .
trigger('image-loaded')
                .
hover(
                    function(){ $(
'#img .caption').stop().animate({height: 50}, 250) },
                    function(){
                        if (!$(
'#show-caption').is(':checked')) {
                            $(
'#img .caption').stop().animate({height: 0}, 250)
                        }
                    }
                );
        },
        
        
// function similar to onImage, but fired when thumbnail is displayed
        
onThumb: function(thumb) {
            var
$li = thumb.parent(),
                
opacity = $li.is('.active') ? 1 : 0.6;
            
            
// hover effects for list elements
            
$li.hover(
                function() {
$li.fadeTo(200, 1); },
                function() {
$li.not('.active').fadeTo(200, opacity); }
            )
        }        
    }).
find('li:first').addClass('active') // display first image when Galleria is loaded
    
    
$('#img .caption').css('height', 0)
    
    $(
'#slideshow').hide()
    
    
// this one is for Firefox, which loves to leave fields checked after page refresh
    
$('#toggle-slideshow, #show-caption').removeAttr('checked')
    
    $(
'#show-caption').change(function(){
        if (
this.checked) {
            $(
'#img .caption').stop().animate({height: 50}, 250)
        } else {
            $(
'#img .caption').stop().animate({height: 0}, 250)   
        }
    })

  
    var
slideshow,
        
slideshowPause =  $('#slideshow-pause').val()

    $(
'#slideshow-pause').change(function(){
        
slideshowPause = this.value
        
        
// clear interval when timeout is changed
        
window.clearInterval(slideshow)

        
// and set new interval with new timeout value
        
slideshow = window.setInterval(function(){
            $.
galleria.next()
        },
slideshowPause * 1000) // must be set in milisecond
    
})
    
$(
'input#toggle-slideshow').change(function(){
        if (
this.checked) {
            $(
'#slideshow').fadeIn()
            
            
// set interval when slideshow is enabled
            
slideshow = window.setInterval(function(){
                $.
galleria.next()
            },
slideshowPause * 1000)
        } else {
            $(
'#slideshow').fadeOut()
            
            
// clear interval when slideshow if disabled
            
window.clearInterval(slideshow)
        }
    })
    
});



Wäre schön wenn hier jemand eine Idee hätte wie ich das umsetzen könnte.

mfg phppower
Mit Zitat antworten
Antwort

Stichworte
verlinkungen

Themen-Optionen
Ansicht

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Link "zurück" von Smilies birgitt OWS Support Forum 3 29.07.2006 20:59
Counter für Besucher als Link einsehbar bhermle OWS Support Forum 1 03.04.2006 19:24


Alle Zeitangaben in WEZ +1. Es ist jetzt 19:35 Uhr.


Powered by vBulletin® Version 3.8.1 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
OnlineWebService.de