The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issues with Jquery slideshow + CSS border hover effect

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #38137

    Here is the website:

    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')? $('#gallery') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = (( ? (('caption'))? $('#gallery a:first') : $('#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})
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)

    The pictures code :


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


    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…


    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.


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.