Solved

Slider initialization

Posted on 2010-09-15
6
345 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
  • 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 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