js 幻灯片放映图片
It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website, magazine or online news has one on their site, and even some e-commerce sites have one.
在网站上放置头版滑块变得越来越流行。 几乎每个电视网站，杂志或在线新闻都在其网站上有一个，甚至一些电子商务网站也有一个。
Today you can use sliders with Joomla, WordPress or Drupal. But the problem I had when I used one of the ready-made components you can download is that it is not customizable. Yes, you can change the look and feel, but you can not change the code. It is very complicated even for experienced developers.
今天，您可以在Joomla，WordPress或Drupal中使用滑块。 但是，当我使用可以下载的现成组件之一时遇到的问题是，它不可定制。 是的，您可以更改外观，但是不能更改代码。 即使对于有经验的开发人员，这也非常复杂。
Finally I decided to make one my own, which I believe is easier to manage and doesn't have 1000 options I do not need. The best part, though, is that I can upgrade it as I want when I need, just by adding a little more code.
最终，我决定自己做一个，我认为它更易于管理，并且没有1000个不需要的选项。 不过，最好的部分是，我可以根据需要进行升级，只需添加更多代码即可。
Back-end section
后端部分
My component is made of two parts. The first one is the back-end section which is the side the visitors do not see -- the administration part of the slider. We will need a simple database table which will contain the data. I will use an Access DB. I created a table with these fields:
我的组件由两部分组成。 第一个是后端部分，该部分是访客看不到的一侧-滑块的管理部分。 我们将需要一个包含数据的简单数据库表。 我将使用Access DB。 我用以下字段创建了一个表：
id Autonumber - this is just for indexing and it will be the primary-key
slideimg Text - this will contain the path to the picture
slidetitle Text - this will contain the title of the slide
slideurl Text - this will contain the URL destination when you click the slide
I saved this table as "slider" and the file as "cms.mdb".
我将此表另存为“ slider”，文件另存为“ cms.mdb”。
Then I created the administration interface. I used WhizBase for querying/editing the DB. Everything between #* and *# are comments so you can follow the code I used.
然后，我创建了管理界面。 我使用WhizBase查询/编辑数据库。 ＃*和*＃之间的所有内容都是注释，因此您可以遵循我使用的代码。
[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=20 #* show 20 records in every page in the navigation system *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slider admin</title>
</head>
<body>
<h1>Add slides<h1>
<form action="addslider.wbsp" method="post" enctype="multipart/form-data">
#* for adding new slides we will submit our data to addslider.wbsp which we will create later. Do not forget to put enctype="multipart/form-data" because we are uploading files to the server. *#
Slide title: <input type="text" name="wbf_slidetitle" /><br />
Slide URL: <input type="text" name="wbf_slideurl" /><br />
Slide IMG: <input type="file" name="wbf_slideimg" /><br />
<input type="submit" value="Add slider" />
</form>
#* You will notice that I am using wbf_ in the input names. It is a prefix I add to make WhizBase process the data I am sending and add it in the DB automatically. *#
<hr />
#* Here we list the result of the query we done in the start of this file *#
<h1>All slides<h1>
<table width="100%" border="1" cellpadding="5" cellspacing="0" align="left">
<tr><td align="left" valign="top"><b>Title</b></td><td align="left" valign="top"><b>Thumb</b></td><td align="left" valign="top"><b>URL</b></td><td align="left" valign="top"><b>Delete</b></td></tr>
<!--WB_BeginDetail--> #* this will go through every record and added in our table *#
<tr>
<td align="left" valign="top">$wbf[slidetitle]</td> #* $wbf is a function in WhizBase to show a field for a record *#
<td align="left" valign="top"><img src="$wbf[slideimg]" width="150" /></td>
<td align="left" valign="top">$wbf[slideurl]</td>
<td align="left" valign="top"><a href="delete.wbsp?wbf_id=$wbf[id]">$wbf[id]</a></td> #* to pass variables by GET method I am using the wbf_ prefix *#
</tr>
<!--WB_EndDetail--> #* this will end the records loop *#
</table>
<center>$wbnavigator[]</center> #* I am adding the navigation links, so we can navigate through big lists *#
</body>
</html>
This page will let me add or delete slides; save it as "slider.wbsp". Now let us see "addslider.wbsp":
此页面将允许我添加或删除幻灯片； 将其另存为“ slider.wbsp”。 现在让我们看到“ addslider.wbsp”：
[FormFields]
WB_BaseName=cms.mdb
WB_AllowMultipart=T #* Allow multipart data is set to True. Without this we can not upload files, because upload is False by default for security reasons *#
WB_Command=A #* Add our parameters in the DB - we get them from the form with wbf_ prefixes *#
WB_Redirect=slider.wbsp #* redirect us to the admin page again *#
WB_RcdSet=slider
[Upload] #* This section is for upload information *#
WB_Disallow=![jpg,gif,png,bmp] #* Disallow everything but pictures *#
WB_UploadDir=/images/ #* Upload pictures to images folder *#
WB_BaseURL=/images/ #* Base path will be images folder *#
WB_Overwrite=F #* Do not overwrite images, new images with same name will be given a new unique name automatically *#
WB_MaxFSize=500000 #* Maximum size in bytes *#
WB_UploadLog=upload.log #* write a log file upload.log *#
This is a pure WhizBase file which will upload the picture and add the data to the DB. It will check the size of the file, the file type, set the upload folder, filter all data from SQL injections and keep the files without being overwritten.
这是一个纯WhizBase文件，它将上传图片并将数据添加到数据库。 它将检查文件的大小，文件类型，设置上传文件夹，从SQL注入中过滤所有数据并保留文件而不会被覆盖。
Now let us make the "delete.wbsp" file which deletes our slides.
现在，让我们制作“ delete.wbsp”文件来删除幻灯片。
[FormFields]
WB_BaseName=cms.mdb
WB_RcdSet=slider
WB_Command=D #* D is for delete, we have got the id in the link with prefix wbf_ *#
WB_Redirect=slider.wbsp
<!--WB_BeginTemplate-->
Now we have the administration ready. You can make a password protected folder and put the administration files in it, but do not forget to change the paths.
现在我们已经准备好行政部门。 您可以创建一个受密码保护的文件夹并将管理文件放入其中，但不要忘记更改路径。
Front-end section
前端部分
The second section is the front-end section which is the side the visitors see; it is the visual part of the slider. We will need some JavaScript and HTML code, with WhizBase for querying the DB.
第二部分是前端部分，它是访问者看到的一面。 它是滑块的可视部分。 我们将需要一些JavaScript和HTML代码，以及用于查询数据库的WhizBase。
[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=$all$ #* show all records in sliders we do not navigate *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<html>
<head>
<title>Frontpage slideshow</title>
<script type="text/javascript">
var slides= new Array($wbp[RC]); #* $wbp[RC] will give the number of records count. We need the number of slides for JS array, we will fill the array with data in the looping section *#
</script>
</head>
<body onload="initslider();"> #* to start the slider we make a JavaScript call on-load of body *#
<div id="slider"></div> #* this will contain the slideshow *#
<!--WB_BeginDetail--> #* I will list all the slides here, but I will not display them. This is good for SEO *#
<script type="text/javascript">slides[$wbp[RN]] = 'slide$wbf[id]';</script> #* $wbp[RN] will give us the record number. We need the slide div id which will be slide+id *#
<div id="slide$wbf[id]" style="display:nome;"> #* Use display:none; to hide the slide *#
<a href="$wbf[slideurl]"><img src="$wbf[slideimg]" alt="$wbf[slidetitle]" border="0" /></a> #* we make the content of every slide *#
</div>
<!--WB_EndDetail-->
#* We need initslider(); function in JavaScript *#
<script type="text/javascript">
var start=0;
function initslider(){
setTimeout("initslider()",500);
document.getElementById('slider').innerHTML = document.getElementById(slides[start]).innerHTML;
if(start == $wbp[RC]-1)
start = 0;
else
start++;
}
#* This function will take the content of the slide from a hidden div and set it in the slideshow div. It will launch itself every 500 miliseconds again and set the next slide in the slideshow div. We check also the slide number, and if it is equal to the number of all slides minus one, it will reset the slide number. *#
</script>
</body>
</html>
With this file, named "default.wbsp", we have a custom made slideshow manager. You can now add more elements in the slide show, like thumbnail picture, description, slide types and timers.
有了这个名为“ default.wbsp”的文件，我们有了一个定制的幻灯片管理器。 现在，您可以在幻灯片中添加更多元素，例如缩略图，说明，幻灯片类型和计时器。
For more information email me at: NurAzije [at] Gmail [dot] com.
有关更多信息，请发送电子邮件至：NurAzije [at] Gmail [dot] com。
NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.
NurAzije是一名PHP和WhizBase程序员，在撰写本文时，他正在与WhizBase合作进行多个项目。
js 幻灯片放映图片
扫一扫
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
