だから私がやろうとしているのは、いくつかのカスタム クラスを持つ div の SharePoint リストからいくつかのコンテンツを表示することです。最初のスクリプトは、 Awkward Showcaseの jquery プラグインを使用しているため 、私の CAML クエリは機能します。サムネイルのキャプションとして表示したいのでdivタグで関数を呼んでいるのですが、ページ全体を上書きして最後に処理するようです。
そのため、すべての div タグとコンテンツがなくなり、関数の結果のみがページに書き込まれます。
これが私のコードです:
<script type="text/javascript">
`$(document).ready(function()'
{
$("#showcase").awShowcase(
{
content_width: 700,
content_height: 470,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
<script type="text/javascript">
function GetNews(){
/*Get News*/
$().SPServices({
operation: "GetListItems",
webURL: 'http://weburl.com',
async: false,
listName: "Posts",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Primary' /><FieldRef Name='Pic' /><FieldRef Name='Short_x0020_Description' /></ViewFields>",
CAMLRowLimit: "10",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='Primary'/><Value Type='choice'>1</Value></Eq></Where></Query>",
completefunc: function (xData, Status) {
//alert("Status of XML message reaching Sharepoint webservice: " + Status);
//alert("Response from server: " + xData.responseText);
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var name = ($(this).attr("ows_Title"));
document.write(name);
});
}
}); //Close getNews
}
</script>
<body>
<div style="width: 700px; margin: auto;">
<div id="showcase" class="showcase">
<!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<!-- The image below needs to be from the variable above pictureUrl -->
<img src="images/01.jpg" alt="01" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
<!-- The image below needs to be from the variable above pictureUrl -->
<img src="images/01.jpg" alt="01" width="140px" />
<!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. This needs to be the variable 'name' from above -->
<div class="showcase-thumbnail-caption"><div><script type="text/javascript">GetNews()</script></div></div>
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the caption content in a div with the class .showcase-caption. This needs to be the variable 'postDesc' from above -->
<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>
</div>
</div>
</div>
</body>