JQuery lightSlider

AndrewNR · 24 Mar 2015 at 21:59

Trying to incorporate this into a website but I'm getting a bit stuck.
http://sachinchoolur.github.io/lightslider/

As per the instructions I added a call to 2 .css files and the CDN thingies to get JQuery to work:

Code:

<link type="text/css" rel="stylesheet" href="lightSlider.css" /> 
<link type="text/css" rel="stylesheet" href="slider.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="lightSlider.js"></script>
<!--Do not include both lightSlider.js and lightSlider.min.js-->

Pretty sure my HTML structure is fine:

Code:

<body>
    		
				<ul id="lightSlider">
					<li>
						<img src="gallery_images/hallway_plastered_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/internal_render_to_chimney_breast_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/metal_lath_over_brickwork_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/resized_thumb.jpg" />
					</li>
    			</ul>

<body>

Then I added:
"Call lightSlider"
"Play with settings"
"Public methods"
Between the <head></head> tags as they're just JavaScript scripts?

Full code is:

Code:

<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<head>

<title>ABC</title>

<link type="text/css" rel="stylesheet" href="lightSlider.css" /> 
<link type="text/css" rel="stylesheet" href="slider.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="lightSlider.js"></script>
<!--Do not include both lightSlider.js and lightSlider.min.js-->

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

<script type="text/javascript">
$(document).ready(function() {
    $("#lightSlider").lightSlider({
        item: 3,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,
 
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////
 
        speed: 400, //ms'
        auto: false,
        loop: false,
        slideEndAnimatoin: true,
        pause: 2000,
 
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
 
        rtl:false,
        adaptiveHeight:false,
 
        vertical:false,
        verticalHeight:500,
        vThumbWidth:100,
 
        thumbItem:10,
        pager: true,
        gallery: false,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: 'middle',
 
        enableTouch:true,
        enableDrag:true,
        freeMove:true,
        swipeThreshold: 40,
 
        responsive : [],
 
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
    });
});
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3);
    slider.goToPrevSlide();
    slider.goToNextSlide();
    slider.getCurrentSlideCount();
    slider.refresh();
    slider.play(); 
    slider.pause();    
  });
</script>

</head>

<body>
    		
				<ul id="lightSlider">
					<li>
						<img src="gallery_images/hallway_plastered_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/internal_render_to_chimney_breast_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/metal_lath_over_brickwork_thumb.jpg" />
					</li>
					<li>
						<img src="gallery_images/resized_thumb.jpg" />
					</li>
    			</ul>

<body>

<html>

I just can't get it to work. At the moment I have the .html file, .css and jquery.lightSlider.js files all saved in the same folder.

I think my declarations for these and the CDN thing is fine?

AndrewNR · 25 Mar 2015 at 18:08

Thanks again for your response.

I got it kind of working but not to what it should look like so gave up in the end.

Ended up just putting thumbnails onto the website and then added "lightbox" so that a full size image (and a slider type thing) opens/pops up when clicked and then the images can be scrolled through.

Would like to obviously try and turn the it into a carousal type thing at some point but it's beyond me at the moment.

JQuery lightSlider

AndrewNR

AndrewNR

AndrewNR

AndrewNR