Issues with Jquery slideshow + CSS border hover effect

[ArcticPenguin]

Here is the website: http://www.les11.com/

The problem lies with the conflict of classes I need the show class for the first picture.

The javascript :

//if no IMGs have the show class, grab the first image

var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));



//Get next image, if it reached the end of the slideshow, rotate it back to the first image

var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));



//Get next image caption

var caption = next.find('img').attr('rel');



//Set the fade in effect for the next image, show class has higher z-index

next.css({opacity: 0.0})

.addClass('show')

.animate({opacity: 1.0}, 1000);



//Hide the current image

current.animate({opacity: 0.0}, 1000)

.removeClass('show');

The pictures code :

I replaced the text with (…) for optimal reading. Does anyone have an idea how to repair this?

[Billy]

So your main problem is selecting the first picture? I don’t exactly get it…

Si tu préfère je peux te parler en français.
Donc ton problème c’est la sélection de la première image? Je n’ai pas trop bien compris…

[ArcticPenguin]

You can clearly see it when entering the website.

La première image reste statique quelques secondes puis fonctionne après. C’est le hover on effect donc quand le curseur passe au-dessus de l’image qui ne marche pas et la même image et afficher deux fois de suite.

The main issue is the first image loads twice and the first time incorrectly. It completly ignores the (article_image class) which enables the hover on effect with CSS.

The problem lies with the fact that I need to enable class=”show” on one of the picture (usually the one that loads the first). But I need a second class (class=”articles_image”) to enable the hover effect on each picture.

[Billy]

So it’s basically the delay at the beginning and the hover not working.

So, for the hover; how is it done? jQuery or CSS? And what you might want to do is make the hover action happen when you hover on the caption.

And the only problem I can think of is that the document is not ready because the images are all loading, which would delay your code.
What you need to do is find something that loads the other images after the script starts running or something; basically after the document has loaded.

[Author]

Posts