www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Help! fade in out with description to slide in from right bug

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    2

    resolved [RESOLVED] Help! fade in out with description to slide in from right bug

    Hey Guys

    my problem is more javascript bugs, in IE it has an opacity bug and in firefox I have a image problem.

    with IE the opacity creates the back shadow of the rel image Black instead of giving it a nice shadow over the Gallary tag image. is there a solution to this?

    on firefox the rel image apears then disapears, then slides from the right to its to where its supposed to slide to. How would I stop it from apearing then disapearing on firefox?



    <html>

    <HEAD>
    <title>ha</title>
    <style type="text/css">
    body{
    font-family:arial
    }
    .clear {
    clear:both
    }
    #gallery {
    position:relative;
    height:389px;
    width:960px;
    }
    #gallery a {
    float:left;
    position:absolute;
    right:0;
    }
    #gallery a img {
    border:none;
    }
    #gallery a.show {
    z-index:500
    }
    #gallery .caption {
    z-index:600;
    background-color:Transparent;
    color:#ffffff;
    height:116px;
    width:376px;
    position:absolute;
    bottom:49px;
    right:0;
    }
    #gallery .caption .content {
    margin:5px
    }
    #gallery .caption .content h3 {
    margin:0;
    padding:0;
    color:#1DCCEF;
    }
    </style>
    <script type="text/javascript" src="-Test/js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    //Execute the slideShow
    slideShow();
    });
    function slideShow() {
    //Set the opacity of all images to 0
    $('#gallery a').css({ opacity: 0.0 });
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({ opacity: 100 });
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({ opacity: 100 });
    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 1.0}, 400);
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',7000);
    }
    function gallery() {
    //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');
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ width: '0px' }, { queue: true, duration: 300 });
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 100},100 ).animate({width: '380px'},500 );
    //Display the content
    $('#gallery .content').html(caption);
    }

    </script>
    </HEAD>
    <BODY>
    <div id="gallery">
    <a class="show">
    <img src="-Test/s3SliderFull/s3Slider Full/nave_img/image_1.png" alt="Flowing Rock" title="" width="960" height="389" rel="<a href='http://www.mbfs.co.za/insurancepersonal.aspx?id=0' target='_parent'><img src='-Test/s3SliderFull/s3Slider Full/nave_img/text_1.png' alt='Personal Insurance'/></a>"/>
    </a>
    <a >
    <img src="-Test/s3SliderFull/s3Slider Full/nave_img/image_2.png" alt="Grass Blades" title="" width="960" height="389" rel="<a href='http://www.mbfs.co.za/insurancepersonal.aspx?id=0' target='_parent'><img src='-Test/s3SliderFull/s3Slider Full/nave_img/text_2.png' alt='Personal Insurance' /></a>"/>
    </a>
    <a>
    <img src="-Test/s3SliderFull/s3Slider Full/nave_img/image_3.png" alt="Grass Blades" title="" width="960" height="389" rel="<span class='right'> <a href='http://www.mbfs.co.za/insurancepersonal.aspx?id=0' target='_parent'><img src='-Test/s3SliderFull/s3Slider Full/nave_img/text_3.png' alt='Personal Insurance' width='376' height='116'/></a> </span>"/>
    </a>
    <a>
    <img src="-Test/s3SliderFull/s3Slider Full/nave_img/image_4.png" alt="Grass Blades" title="" width="960" height="389" rel="<span class='right'> <a href='http://www.mbfs.co.za/insurancepersonal.aspx?id=0' target='_parent'><img src='-Test/s3SliderFull/s3Slider Full/nave_img/text_4.png' alt='Personal Insurance' width='376' height='116'/></a> </span>"/>
    </a>
    <a>
    <img src="-Test/s3SliderFull/s3Slider Full/nave_img/image_5.png" alt="Grass Blades" title="" width="960" height="389" rel="<span class='right'> <a href='http://www.mbfs.co.za/insurancepersonal.aspx?id=0' target='_parent'><img src='-Test/s3SliderFull/s3Slider Full/nave_img/text_5.png' alt='Personal Insurance' width='376' height='116'/></a> </span>"/>
    </a>
    <div class="caption">
    <div class="content">

    </div>
    </div>
    </div>
    <div class="clear"></div>

    </BODY>
    </html>

  2. #2
    Join Date
    Feb 2012
    Posts
    2
    Hey Guys

    Thanks for the great posts, ended up solving my problem.

    I placed the rel tag as a completely separate tag on it's own then calling the same fade function but giving it the ability to slide rather than fade.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles