JQuery lightSlider

AndrewNR

AndrewNR

AndrewNR

Soldato
Joined
18 Aug 2011
Posts
2,856
Location
Norfolk
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?
 
You're importing jQuery twice, this never plays nicely.

You're also calling the lightSlider plugin 3 times. It's not telling you to use all of them, just one. The first one is a basic instantiation, second are the available settings and third is showing you the methods you can use.

Code: 
<!DOCTYPE html>
<html>

<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="lightSlider.js"></script>
    <!--Do not include both lightSlider.js and lightSlider.min.js-->
    <script type="text/javascript">
    $(document).ready(function() {
        $("#lightSlider").lightSlider();
    });
    </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>
 
Last edited:
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. :p
 
You must log in or register to reply here.
Back
Top Bottom