Question

    <script type="text/javascript">

            jQuery(function ($) {

                $.supersized({

                    // Functionality
                    slide_interval: 5000,       // Length between transitions
                    transition: 1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed: 700,      // Speed of transition

                    // Components                           
                    slide_links: 'blank',   // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides: [           // Slideshow Images
                                                        { image: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg', url: 'http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg', url: 'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg' },
                                                        { image: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg', url: 'http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg', url: 'http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg', url: 'http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg', url: 'http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg' },
                                                        { image: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg', url: 'http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg', url: 'http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg' },
                                                        { image: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg', url: 'http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg' }
                    ]

                });
            });

        </script>

<script>

    $(document).ready(function () {
        function loop(){
      $("#p1").delay("1000").fadeIn("slow");
      $("#p2").delay("1000").fadeIn("slow");
      $("#p1").delay("3000").fadeOut("slow");
      $("#p2").delay("3000").fadeOut("slow");
      $("#p3").delay("6000").fadeIn("slow");
      $("#p3").delay("3000").fadeOut("slow");
      $("#p4").delay("12000").fadeIn("slow");
      $("#p4").delay("3000").fadeOut("slow");
      $("#p5").delay("18000").fadeIn("slow");
      $("#p5").delay("3000").fadeOut("slow");
      $("#p6").delay("24000").fadeIn("slow");
      $("#p6").delay("3000").fadeOut("slow");
      $("#p7").delay("30000").fadeIn("slow");
      $("#p7").delay("3000").fadeOut("slow");
      $("#p8").delay("35000").fadeIn("slow");
      $("#p8").delay("3000").fadeOut("slow");
      $("#p9").delay("41000").fadeIn("slow");
      $("#p9").delay("3000").fadeOut("slow");
      $("#p10").delay("46000").fadeIn("slow");
      $("#p10").delay("4084").fadeOut("slow",loop);
        }
        loop();
    });


</script>

Ok dudes, here’s the problem. I’ve got a full background slideshow which I would like to sync up with some text that will appear on screen. As you can see, this text is represented by the ‘p’ fadeIns. My problem is that my current method for ensuring that the text always appears on the correct background slide is just to delay the last image, which is less than ideal as it goes out of sync. I’d appreciate someone telling me a better way this can be done 😀 I was thinking we could tell the fadeIn function to activate as soon as the first background image appears on screen, but an unsure how to do this.

Answer 1

Ideally you should put the code to fade the text inside the theme’s function theme.beforeAnimation(), if you are using the default theme (shutter) check the file supersized.shutter.js and search for ‘beforeAnimation : function(direction){‘.

Another (ugly) way could be:

• Setup the slide show to off
• Use the API to transition the slides ‘manually’ with the text you want using api.nextslide()

EDIT:
First make sure you are using the template version that is not minified: In the head of your html you will find this:

<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

replace with:

<script type="text/javascript" src="theme/supersized.shutter.js"></script>

then edit the supersized.shutter.js file and add the follow lines inside the beforeAnimation() function (line 239)

$('[id^="p"]').fadeOut(); 
$('#p' + (vars.current_slide + 1)).delay(500).fadeIn("slow"); 

Because I don’t know how is your html I am hiding all elements with id that starts with ‘p’, it is better if you improve this selector $(‘[id^=”p”]’).fadeOut();.
That is it.

Hope it helps.