Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow Navigation Disappears & Images Show Briefly Below

    Two Questions & Beginner Warning!

    1. I wasn't sure where to post this exactly. This is a style issue related to jquery. I want to change (#slidernav a.activeSlide) to a different color image called "home-goldcirnav.png" but when I upload the newly named image to the exact same directory and change skin {url=images/home-blackcircnav.png} to skin {url=images/home-goldcircnav.png} it causes the active button to completely disappear. Is there somewhere else I need to make a change(s)?? Please see code directly below & further down. Thank you!

    Code:
    #slidernav { z-index: 1000; position: absolute; top: 665px; left: 530px }
    #slidernav a { display: block; float: left; width: 16px; height: 16px; margin: 0 5px; padding: 3px 5px; //border: 1px solid #ccc; //background: #cff; background:url('{{skin url=images/home-greycircnav.png}}') no-repeat; text-decoration: none }
    #slidernav a:hover { background:url('{{skin url=images/home-dkgreycircnav.png}}') no-repeat; text-decoration: none }
    #slidernav a.activeSlide { display:block; //background: #ff9e1f; background:url('{{skin url=images/home-blackcircnav.png}}') no-repeat; }
    #slidernav a:focus { outline: none; }
    2. Also, when the images load for the jquery slideshow they display briefly BELOW the slideshow & then snap up & into place. Why is it doing this? Does it have anything to do with preloading images? See code below. Thank you.


    Code:
    /*preload images */
    
    Image4 = new Image(900,625)
    Image4.src = "{{skin url=images/home-flip1.jpg}}"
    
    Image2= new Image(900,625)
    Image2.src = "{{skin url=images/instant-flip.jpg}}"
    
    Image3 = new Image(900,625)
    Image3.src = "{{skin url=images/new-flip.jpg}}"
    
    Image1 = new Image(900,625)
    Image1.src = "{{skin url=images/picks-2014-flip.jpg}}"
    
    /* <![CDATA[ */
    $(function() {
        $('#pause').click(function() { $('#slides').cycle('pause'); return false; });
        $('#play').click(function() { $('#slides').cycle('resume'); return false; });
        
        $('#slideshow').hover(
            function() { $('#controls').fadeIn(); },
            function() { $('#controls').fadeOut(); }
        );
        
        $('#slides').cycle({
            fx:     'scrollLeft,scrollUp,scrollRight,scrollDown',
            randomizeEffects: false, 
            speed:   1000,
            timeout: 3000,
            pager:  '#slidernav',
            pagerAnchorBuilder: function(idx, el) {
                return '<a href="#" title="Slides"></a>';
             },
    	slideExpr: 'img',
            autostop: 1, 
                  end:      function(options) {  
                  $('#slides').cycle(0).cycle('pause');
                  }
    
        });
    });
    /* ]]> */
    </script>

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all! Ok, I figured out my question number one. I must have been tired because I was loading the image to the wrong server!!!! Go ahead & laugh at me But question number two remains & has been an issue lingering for months. Once again, when the slideshow one or more images briefly appear below the slideshow & then snap in. How do I stop this?? Thank you for your patience.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You didn't mention which jQuery plugin are you using for the slideshow. I'm guessing it's this jQuery Cycle Plugin.

    From one of their demo pages, I found this:

    Cycle2 Image Loader

    where if you put this attribute

    Code:
    data-cycle-loader="wait"
    to the slideshow container, it will instruct the plugin to delay slideshow initialization until all images declared in the slideshow have been downloaded.

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow Images Display Briefly When Page Is Loading - Solved!!!!!

    Solved! Glenngv, apparently ((code: data-cycle-loader="wait")) is being implicated in causing a variety of display issues BUT I did find the following simple & effective solution. And yes, I am using: jquery.cycle.all.js

    Code:
        #slideshow img { display: none }
        #slideshow img.first { display: block }
        ...
        <div id="slideshow">
            <img src="image1.jpg" width="200" height="200" class="first">
            <img src="image2.jpg" width="200" height="200">
            <img src="image3.jpg" width="200" height="200">
        </div>

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Glad you sorted it out.

    But you don't have to add the "first" class. You can simply use :first-child pseudo-class to target the first image.

    Code:
    #slideshow img:first-child { display: block; }

  • #6
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for that clarification & replying glenngv! I'm sure to be learning a lot on forums here from you & others. Take care


  •  

    Posting Permissions

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