jCarousel通过Ajax动态加载内容
jCarousel dynamic content loading via Ajax
我尝试制作一个滑块并从php文件动态加载数据,我从数据库中获取图像,但我现在有问题链接这个图像。。。
这是我的php文件ajax_php.php
// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
$last = max($first + 1, intval($_GET['last']) - 1);
$length = $last - $first + 1;
// ---
require_once('../../includes/config.php');
error_reporting(0);
mysql_connect($conf['host'], $conf['user'], $conf['pass']);
mysql_select_db($conf['name']);
$getUser = "SELECT * FROM sitex WHERE img_i!='images/img_i.jpg' ORDER BY `sitex`.`likes` DESC LIMIT 35";
$res = mysql_query($getUser) or die();
$images = array();
while(($row = mysql_fetch_assoc($res))) {
$images[] = '/images/'.$row['img_i'].'';
}
$total = count($images);
$selected = array_slice($images, $first, $length);
// ---
header('Content-Type: text/xml');
echo '<data>';
echo ' <total>' . $total . '</total>';
foreach ($selected as $img) {
echo '<image>' . $img . '</image>';
}
echo '</data>';
这是js
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
});
};
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#futuredbc').jcarousel({
easing: 'BounceEaseOut',
itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback
});
});
这种方法像一样支持我的结果
<img width="75" height="75" alt="" src="img.jpg">
但我需要制作一个类似的链接图像
<a href="http://site.com/548"><img width="75" height="75" alt="" src="img.jpg"></a>
所以site.com/548它是一个i ID,我可以从数据库'.$row['id'].'
中获得它,但我不知道如何制作js和链接结果
最简单的方法(无需添加函数来解析另一个XML标记(<bla>
))就是要将ID添加到image xml tag
的值中,并使用delimiter
,我们将split
url中的ID。
将row ID
添加到阵列:
while(($row = mysql_fetch_assoc($res))) {
$images[] = array('id' => $row['id'] , 'src' => '/images/'.$row['img_i'].'');
}
将其打印到XML:
foreach ($selected as $img) {
echo '<image>' . $img['src'] . '|||'.$img['id'].'</image>';
}
然后,重新定位:
return '<img src="' + url + '" width="75" height="75" alt="" />';
带有:
var tmp = url.split('|||');
return '<a href="www.site.com/'+ tmp[1] +'"><img src="' + tmp[0] + '" width="75" height="75" alt="" /></a>';
应该有效。否则,请发表评论,我会修复它。
相关文章:
- UIWebview赢得't通过基本身份验证加载动态加载的资源(通过jQuery mobile)
- 我们可以加载动态角度对话框吗
- 使用JQuery在遗留html中加载动态AngularJS
- 谷歌地图在angularjs中懒惰加载动态地理坐标更新
- 正在加载动态日历以在一个月的正确日期开始
- 从服务器和/或客户端加载动态元素的典型技术是什么
- 如何加载动态更改的css文件
- jQuery 时间选取器未加载动态文本字段
- 如何在Highslide中加载动态生成的iframe
- 有没有办法避免角加载动态构建页面时的抖动效应
- 加载动态添加的输入字段
- 用于加载动态 JSON 数据的 JQuery 移动事件
- 手控表未加载动态创建的列标题
- 如何在 ag-grid 中从 http 调用加载动态列和行(列和记录都应该是动态的)
- Jquery 在 Firefox 中的自定义对象参数(动态导航加载动态内容)
- 延迟加载动态驱动器内容选项卡
- Angular JS ui-router - 加载动态视图和动态控制器
- 防止在引导选项卡中加载动态连续网络两次
- 使用 nodejs 加载动态 html
- 如何在 XSLT 中加载动态内容时创建函数