0
我想为客户的WordPress的网站创建更具体的jQuery画廊！需要帮助jQuery的画廊从wordpress附件
的理念是：
我们有页 “画廊” 女巫将使用页面模板 “画廊-TPL”，让我们说！
在页面模板“Gallery-tpl”我有一个头像女巫的大图像是第一篇文章附件的全尺寸！
一些身体在那里我有< DIV>与所有附件
TUMBNAIL SIZE的无序列表！
这个名单必须是一个滑块
而且我要当点击缩略图标头中的大图像与点击的缩略图的完整版本的改变
我对这个职位Get Attachments to post如何发现获得第一个附件，以及如何获得所有这些！
我发现了一种用jQuery替换图像的方法。
然后我试图所有代码结合在一起，但它仅适用于一个图像
这里是我的“画廊-TPL”
<?php
/**
Template Name: Gallery
original: http://www.rlmseo.com/blog/get-images-attached-to-post/
*/
function bdw_get_first_image() {
// Get the post ID
$iPostID = $post->ID;
// Get images for this post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID);
// If images exist for this page
if($arrImages) {
// Get array keys representing attached image numbers
$arrKeys = array_keys($arrImages);
/******BEGIN BUBBLE SORT BY MENU ORDER************/
// Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}
// Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}
// Reset arrKeys array
$arrKeys = array();
// Replace arrKeys with newly sorted object ids
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}
/******END BUBBLE SORT BY MENU ORDER**************/
// Get the first image attachment
$iNum = $arrKeys[0];
// Get the thumbnail url for the attachment
$sThumbUrl = wp_get_attachment_thumb_url($iNum);
// UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
$sImageUrl = wp_get_attachment_url($iNum);
// Build the <img> string
$sImgString = '<a href="' .$sImageUrl . '" class="btw_fullimage">' .
'<img src="' . $sImageUrl . '" width="600" height="200" alt="Big Image" title="Big Image" />' .
'</a>';
// Print the image
echo $sImgString;
}
}
function bdw_get_images() {
// Get the post ID
$iPostID = $post->ID;
// Get images for this post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID);
// If images exist for this page
if($arrImages) {
// Get array keys representing attached image numbers
$arrKeys = array_keys($arrImages);
/******BEGIN BUBBLE SORT BY MENU ORDER************/
// Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}
// Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}
// Reset arrKeys array
$arrKeys = array();
// Replace arrKeys with newly sorted object ids
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}
/******END BUBBLE SORT BY MENU ORDER**************/
// izpolzvai do ili for
echo '<ul id="btw_gallery">';
for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
// Get the first image attachment
$iNum = $arrKeys[$i];
// Get the thumbnail url for the attachment
$sThumbUrl = wp_get_attachment_thumb_url($iNum);
// UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
$sImageUrl = wp_get_attachment_url($iNum);
// Build the <img> string
$sImgString = '<img src="' . $sThumbUrl . '" alt="Thumbnail Image" title="Thumbnail Image" class="btw_thumb" />';
// Print the image
echo '<li>'.$sImgString.'</li>';
}
echo '</ul>';
echo '
<script>
$("#btw_gallery li img").live("click", function() {
$("a.btw_fullimage").attr("href", \''.$sImageUrl.'\').attr("title", this.title);
$(".btw_fullimage img").attr("src", \''.$sImageUrl.'\').attr("alt", this.alt).attr("title", this.title);
});
</script>
';
}
}
get_header(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="primary">
<div id="content" role="main">
<?php while (have_posts()) : the_post(); ?>
<?php bdw_get_first_image(); ?>
<?php get_template_part('content', 'page'); ?>
<?php bdw_get_images(); ?>
<?php endwhile; // end of the loop. ?>
<hr />
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
我确信还有更多正确和专业的方式来做到这一点，它会工作！
如果有人能帮助我，请回答我！