Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Slider initialization

Posted on 2010-09-15
6
Medium Priority
?
364 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

636 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