How do I change images in easy slider 1.5 ?

chopperchic
chopperchic used Ask the Experts™
on
I have to admit I know nothing about javascript. I'm building a website using a template:
This is the template:
http://www.templateworld.com/templates-iPhone-Apps-2529.html

I want to add images to the slider area but I'm not sure how to do that. I know it's a dumb question for you. I have been trying to google a solution but couldn't find any.
Any help would be appreciated.
Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Erdinç Güngör ÇorbacıPHP Development Team Leader

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

Author

Commented:
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);


Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
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
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
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>

Open in new window

Jagadishwor DulalSenior Web Developer

Commented:
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>
 *
 */

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

Open 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.
Senior Web Developer
Commented:
Ok There in your template the line you can see like below:

 <div id="slider">
       <ul>

        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
       </ul>
       </div>

Open in new window


Now Change them like:
 <div id="slider">
       <ul>

        <li><img src="image_dir/image.extension" alt=""/></li>
        <li><img src="image_dir/image.extension" alt=""/></li>
        <li><img src="image_dir/image.extension" alt=""/></li>
       </ul>
       </div>

Open in new window

Means Just remove the slide1, slide 2 and slide 3 and Insert the image like above.

Author

Commented:
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!
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
I can't see any html code to correct and there is nothing different then i explained i think , is there ?
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
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>

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

Open in new window




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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial