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
Solved

Slider initialization

Posted on 2010-09-15
6
349 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

792 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