?
Solved

Slider initialization

Posted on 2010-09-15
6
Medium Priority
?
359 Views
Last Modified: 2012-08-14
http://www.pearlfisher.com/ uses the Noobslider slideshow component. If you look carefully when you load the page, you'll see the first image slide into view. The big question is: how?

The start index is 0 and animation.next() is called. Nonetheless, the first image hoves into view. What *was* showing before that happened?

This is a difficult question and a precise and full answer will get maximum points and starry accolades, despite starting at 200 points
0
Comment
Question by:CEHJ
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 33681504
There is a blank element which is being treated as element 0

<span><img src="images/cases/initial.jpg" alt="" /></span>

The source of the image is initial.jpg which is blank image so virtually nothing will appear while the page loads.

Now the script will be executed only after the body is loaded completely.

window.addEvent('domready',function(){

Start element in this is 0 which is the blank image in the span above. the call to animation.next(); is below the call to the slider so it will execute the next() function and the second element (idspan0) will be loaded and displayed on screen.

Hope this helps.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 33681564
ddsh79, that's a promising start, but if initial.jpg is the initial image, how is it that it gets left out of the slideshow thereafter (it's not possible to return to it with the slider nav buttons)?
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 33681930
The answer to this lies in slider.js file. If you look at it you'll find the code

var initial_animate1 = function(){
                            animation.walk(0,manual);
                        };

                        var initial_animate2 = function(){
                            animation.next();
                        };

                        initial_animate.chain(initial_animate1);
                        initial_animate.chain(initial_animate2);

see initial animate makes it to walk to element 0 which is the blank image but just after that there is a call to initial_animate2 function which calls animation.next(); making it to load the next iimage.

This function is called when the animation reaches at the end of the slide and next is clicked again.

I have not looked for the previous functionality but it should also be bypassing the 0th element (blank image).
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 86

Author Comment

by:CEHJ
ID: 33685755
Yes, that pretty nasty and tortuous. What i'm actually using is the attached so i'll try to find a means of skipping the item at index 0 that's simple an elegant. Any suggestions?


noobSlide.js
0
 
LVL 14

Accepted Solution

by:
Dushyant Sharma earned 800 total points
ID: 33688737
You can try to add an additional parameter say startIndex to the script. That you can initialize as other parameters eg. startIndex : 1

In the js file you can add it like
initialize: function(params){
.......
this.startIndex= params.startIndex || 0;
.......
},

In the next and previous functions you can try to replace 0 (default) with startIndex

You may also need to change it at some other places.

so with this if you do not initialize startIndex then it will work as normal ( 0 being the default). else it should take the parameter and should skip the elements.

Hope this helps
0
 
LVL 86

Author Closing Comment

by:CEHJ
ID: 33701464
Excellent help. Everything i needed short of writing it for me. Nice to see you in Java TA too ;)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question