How do I change images in easy slider 1.5 ?

we need to see the html code ... there is just a picture of theme :(

Here it is:


/*
 *       Easy Slider 1.5 - jQuery plugin
 *      written by Alen Grakalic      
 *      http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *      Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *      Dual licensed under the MIT (MIT-LICENSE.txt)
 *      and GPL (GPL-LICENSE.txt) licenses.
 *
 *      Built for jQuery library
 *      http://jquery.com
 *
 */
 
/*
 *      markup example for $("#slider").easySlider();
 *      
 *       <div id="slider">
 *            <ul>
 *                  <li><img src="images/01.jpg" alt="" /></li>
 *                  <li><img src="images/02.jpg" alt="" /></li>
 *                  <li><img src="images/03.jpg" alt="" /></li>
 *                  <li><img src="images/04.jpg" alt="" /></li>
 *                  <li><img src="images/05.jpg" alt="" /></li>
 *            </ul>
 *      </div>
 *
 */

(function($) {

      $.fn.easySlider = function(options){
        
            // default configuration properties
            var defaults = {                  
                  prevId:             'prevBtn',
                  prevText:             '<&nbsp;Previous',
                  nextId:             'nextBtn',      
                  nextText:             'Next&nbsp;>',
                  controlsShow:      true,
                  controlsBefore:      '',
                  controlsAfter:      '',      
                  controlsFade:      true,
                  firstId:             'firstBtn',
                  firstText:             'First',
                  firstShow:            false,
                  lastId:             'lastBtn',      
                  lastText:             'Last',
                  lastShow:            false,                        
                  vertical:            false,
                  speed:                   1000,
                  auto:                  false,
                  pause:                  5000,
                  continuous:            false
            };
            
            var options = $.extend(defaults, options);  
                        
            this.each(function() {  
                  var obj = $(this);                         
                  var s = $("li", obj).length;
                  var w = $("li", obj).width();
                  var h = $("li", obj).height();
                  obj.width(w);
                  obj.height(h);
                  obj.css("overflow","hidden");
                  var ts = s-1;
                  var t = 0;
                  $("ul", obj).css('width',s*w);                  
                  if(!options.vertical) $("li", obj).css('float','left');
                  
                  if(options.controlsShow){
                        var html = options.controlsBefore;
                        if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                        html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                        html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                        if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
                        html += options.controlsAfter;                                    
                        $(obj).after(html);                                                            
                  };
      
                  $("a","#"+options.nextId).click(function(){            
                        animate("next",true);
                  });
                  $("a","#"+options.prevId).click(function(){            
                        animate("prev",true);                        
                  });      
                  $("a","#"+options.firstId).click(function(){            
                        animate("first",true);
                  });                        
                  $("a","#"+options.lastId).click(function(){            
                        animate("last",true);                        
                  });            
                  
                  function animate(dir,clicked){
                        var ot = t;                        
                        switch(dir){
                              case "next":
                                    t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                                    
                                    break;
                              case "prev":
                                    t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                                    break;
                              case "first":
                                    t = 0;
                                    break;
                              case "last":
                                    t = ts;
                                    break;
                              default:
                                    break;
                        };      
                        
                        var diff = Math.abs(ot-t);
                        var speed = diff*options.speed;                                    
                        if(!options.vertical) {
                              p = (t*w*-1);
                              $("ul",obj).animate(
                                    { marginLeft: p },
                                    speed
                              );                        
                        } else {
                              p = (t*h*-1);
                              $("ul",obj).animate(
                                    { marginTop: p },
                                    speed
                              );                              
                        };
                        
                        if(!options.continuous && options.controlsFade){                              
                              if(t==ts){
                                    $("a","#"+options.nextId).hide();
                                    $("a","#"+options.lastId).hide();
                              } else {
                                    $("a","#"+options.nextId).show();
                                    $("a","#"+options.lastId).show();                              
                              };
                              if(t==0){
                                    $("a","#"+options.prevId).hide();
                                    $("a","#"+options.firstId).hide();
                              } else {
                                    $("a","#"+options.prevId).show();
                                    $("a","#"+options.firstId).show();
                              };                              
                        };                        
                        
                        if(clicked) clearTimeout(timeout);
                        if(options.auto && dir=="next" && !clicked){;
                              timeout = setTimeout(function(){
                                    animate("next",false);
                              },diff*options.speed+options.pause);
                        };
                        
                  };
                  // init
                  var timeout;
                  if(options.auto){;
                        timeout = setTimeout(function(){
                              animate("next",false);
                        },options.pause);
                  };            
            
                  if(!options.continuous && options.controlsFade){                              
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();                        
                  };                        
                  
            });
        
      };

})(jQuery);

that is the plugins code ... how your html code is ?

normally ;
 
<ul>
                  <li><img src="images/01.jpg" alt="" /></li>
                  <li><img src="images/02.jpg" alt="" /></li>
                  <li><img src="images/03.jpg" alt="" /></li>
                  <li><img src="images/04.jpg" alt="" /></li>
                  <li><img src="images/05.jpg" alt="" /></li>
</ul>

is the part you indicate the images... just change src parts

btw

you need to define an id for an ul like above

for instance if you set as;

<ul id="slider" >

you need to use it for easyslide as below

 

<script type="text/javascript">

	$(document).ready(function(){	

		$("#slider").easySlider();

	});	

</script>

Select allOpen in new window

Above in your code there is line:

/*
 *      markup example for $("#slider").easySlider();
 *      
 *       <div id="slider">
 *            <ul>
 *                  <li><img src="images/01.jpg" alt="" /></li>
 *                  <li><img src="images/02.jpg" alt="" /></li>
 *                  <li><img src="images/03.jpg" alt="" /></li>
 *                  <li><img src="images/04.jpg" alt="" /></li>
 *                  <li><img src="images/05.jpg" alt="" /></li>
 *            </ul>
 *      </div>
 *
 */

Select allOpen in new window

Here is your calling method that is from

<div id="slider">
             <ul>
                   <li><img src="your_img_dir/img.extension" alt="" /></li>
                 <li><img src="your_img_dir/img.extension" alt="" /></li>
                 <li><img src="your_img_dir/img.extension" alt="" /></li>
                 <li><img src="your_img_dir/img.extension" alt="" /></li>
                  <li><img src="your_img_dir/img.extension" alt="" /></li>
            </ul>
     </div>

Select allOpen in new window

Manage your image directory and don't forget to link script file on the header of your page. And your images for slider should in inside slider div.

Thank you so much! If I would have looked further down in the code I would have probably figured it out. You have been a great help!

I can't see any html code to correct and there is nothing different then i explained i think , is there ?

Sample HTML code syntax for easyslider -below-  is accepted as answer is not enough to make easyslider function as expected. (which is first suggested in comment #35762100)

 

<ul id="slider">
                  <li><img src="images/01.jpg" alt="" /></li>
                  <li><img src="images/02.jpg" alt="" /></li>
                  <li><img src="images/03.jpg" alt="" /></li>
                  <li><img src="images/04.jpg" alt="" /></li>
                  <li><img src="images/05.jpg" alt="" /></li>
</ul>

Select allOpen in new window

JS Code sent in comment #35762108  also should be used to achieve the plugin's functionality.

 

<script type="text/javascript">
        $(document).ready(function(){   
                $("#slider").easySlider();
        });     
</script>

Select allOpen in new window

Accepted answer #35762446 is not containing any new code structure or approach. So comments above are the solutions for the problem.