Creating first jQuery slideshow plugin, converting from Javascript

Question

Welcome To Ask or Share your Answers For Others

Creating first jQuery slideshow plugin, converting from Javascript

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

Creating first jQuery slideshow plugin, converting from Javascript

I was asking about a jQuery plugin with image, title and description jQuery slide show. But can't find such. So tried to build a very small and easy [ugly] slide-show using only javascript. But there are some drawbacks, as in my script I have to hard code images, titles and descriptions. So I want to create a jQuery plugin from scratch which does only the same job as the script does, and also builds the slide-show on runtime. So this will also be a tutorial on creating a basic slide-show plug-in.

The code I used for the easy, ugly slide-show controller

<html>
<style type="text/css">
td {
 border:1px solid #ccc;
 width: 420px;
 max-width:420px;
 text-overflow:ellipsis; 
}
span {
word-wrap: break-word;
width: 420px;
 max-width:420px;
 overflow-y:auto; overflow-x:hidden;
 border:1px solid red;
}
</style>
<body>
<table>
<tr><td><img id="img" name="img" src="" title="Image" /></td> </tr>
<tr><td><span id="title">title</span></td></tr>
<tr><td><span id="desc">description</span></td></tr>
<tr><td><input type="button" value="<" onclick="back()" />
<input type="button" value=">" onclick="next()" /> 
<input type="text" id="idx" value="1" size="2" /> </td></tr>
</table></body>
<script>
var titles = ["zero", "one", "two", "three", "four"];
var descs = ["0 zer0", "1 one ", "2 two ", "3 three", "4 four"];
var img = document.getElementById('img');
var ttl = document.getElementById('title');
var dsc = document.getElementById('desc');
var idx = document.getElementById('idx');
var limit = titles.length-1;

function back()
{
 if (parseInt(idx.value) > 1)
  idx.value = parseInt(idx.value) - 1;
 img.src = 'images/image' + idx.value + '.jpg'; 
 ttl.innerHTML = titles[idx.value];
 dsc.innerHTML = descs[idx.value];
}

function next()
{
 if (parseInt(idx.value) < limit)
    idx.value = parseInt(idx.value) + 1;
 img.src = 'images/image' + idx.value + '.jpg'; 
 ttl.innerHTML = titles[idx.value];
 dsc.innerHTML = descs[idx.value];
}
</script>
</html>

I want it to be used as

<div id="main">
<img src="...." title="Title of image 1" data-desc="description of #1 image" />  
<img src="...." title="Title of image 2" data-desc="description of #2 image" />
</div>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:26:52+0000

You can use nivo slider .

You just have to mention description of an image in alt attribute and title of an image in title attribute.

And just attach the plugin to your wrapper element:

$(window).load(function() {
    $('#main').nivoSlider(); 
});

Edit1: A simple way to create such plugin

jQuery.fn.imgSlider = function( options ) {

    // default settings:
    var defaults = {
        textColor: "#000",
        backgroundColor: "#fff",
        fontSize: "16px",
        getTextFromTitle: true,
        getTextFromAlt: false,
        animateOpacity: true,
        animationDuration: 500,
        clickImgToGoToNext: true,
        clickImgToGoToLast: false,
        nextButtonText: "next",
        previousButtonText: "previous",
        nextButtonTextColor: "red",
        previousButtonTextColor: "red"
    };

    var settings = $.extend( {}, defaults, options );

    return this.each(function() {
        // Plugin code would go here...
    });

};

call the plugin

$( "div" ). imgSlider();

Edit 2

I have created a jQuery Image Slider Plugin. here is the example with annotated code.

Categories

Creating first jQuery slideshow plugin, converting from Javascript

Creating first jQuery slideshow plugin, converting from Javascript

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags