11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

je n'arrive pas à résoudre un problème qui persiste : je voudrais que ma fonction s'applique à chaque élément "block" de mon script et en faite celle-ci fonctionne correctement, mais sur tous les .block

j'ai fais un cas isolé pour qu'on comprenne mieux le problème à l'adresse suivante :

http://internet.umour.free.fr/example.html



Voici le jQuery :

    <script type="text/javascript">
        $(document).ready(function() { 
            function displayImage(domAAroundImgThumb)
            {
                    if (!domAAroundImgThumb.hasClass('shown'))
                    {
                            var newSrc = domAAroundImgThumb.attr('href');
                            $('img.work-big-view').fadeOut('fast', function(){
                                    $(this).attr('src', newSrc);
                                    $(this).fadeIn('fast');
                            });
                            $('.work-view a').removeClass('shown');
                            $(domAAroundImgThumb).addClass('shown');
                    }
            }
            //hover 'other views' images management
            $('.work-view a').hover(
                    function(){displayImage($(this));},
                    function(){}
            );
    
            //add a link on the span 'view full size' and on the big image
            $(this, 'img.work-big-view').click(function(){
                    $('.work-view a.shown').click();
            });
    
        });
    </script>


et le html:

        <div class="block left">
            <img class="work-big-view" src="http://www.star-bike.com/images/CB1000R_Side.jpg" alt="" />
            <div class="work-view">
                <a class="shown" href="http://www.star-bike.com/images/CB1000R_Side.jpg"><img src="http://t0.gstatic.com/images?q=tbn [langue]oEk0-s5S1y7NM:http://www.star-bike.com/images/CB1000R_Side.jpg" alt="" /></a>
            </div>
            <div class="work-view">
                <a href="http://images.forum-auto.com/mesimages/675435/cb1000r-3quart.jpg"><img src="http://t3.gstatic.com/images?q=tbn:t563PIYvDrmJNM:http://images.forum-auto.com/mesimages/675435/cb1000r-3quart.jpg" alt="" /></a>
            </div>
            <div class="work-view">
                <a href="http://images.motofan.fr/C/5/1/0/cb100r-032009_fs32488.jpg"><img src="data:image/jpg;base64,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" alt="" /></a>
            </div>
            <br class="clear" />
        </div>
        <br class="clear" />
        <div class="block left">
            <img class="work-big-view" src="http://kitsuney.free.fr/blog/blog/files/angry-monkey-739979.jpg" alt="" />
            <div class="work-view">
                <a class="shown" href="http://kitsuney.free.fr/blog/blog/files/angry-monkey-739979.jpg"><img src="http://t2.gstatic.com/images?q=tbn:go5OGgQBXf2UaM:http://kitsuney.free.fr/blog/blog/files/angry-monkey-739979.jpg" alt="" /></a>
            </div>
            <div class="work-view">
                <a href="http://rhinoden.rangerup.com/wp-content/uploads/2010/08/Scared-Monkey1.jpg"><img src="http://t1.gstatic.com/images?q=tbn:S4t5fa0abdrzNM:http://rhinoden.rangerup.com/wp-content/uploads/2010/08/Scared-Monkey1.jpg" alt="" /></a>
            </div>
            <div class="work-view">
                <a href="portfolio//big-logo.jpg"><img src="portfolio//min-logo.jpg" alt="" /></a>
            </div>
            <br class="clear" />
        </div>



si vous avez une petite idée... je pense avoir mal utilisé les $(this) mais je ne trouve pas d'ou..