Solved

Slider initialization

Posted on 2010-09-15
6
353 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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 200 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)

707 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