これは、問題のあるスクリプト部分です
<script type="text/javascript">
// To deploy big preview vertically :
var deployer;
deployer = "";
function deploy() {
$("#" + deployer.substring(0, 4)).slideToggle({
duration: 500,
easing: 'easeOutCirc'
});
}
function reset(bigno) {
var attendre = false;
var deployno = deployer.substring(0, 4);
// close other pictures if opened
if ((deployer == deployno + "_on") && (deployno != bigno)) {
$("#" + deployno).slideToggle({
duration: 300,
easing: 'easeOutCirc'
});
attendre = true;
}
// if picture is opened or closed
if (deployer == bigno + "_on") // if bigno is deployeddeployer = bigno + "_off"; // bigno closed
else deployer = bigno + "_on"; // bigno opened
// deploy the current picture
if (attendre) setTimeout(deploy, 600);
else deploy();
}
$(document).ready(function() {
$(".vignette01").click(function() {
reset("big1");
return false;
});
$(".vignette02").click(function() {
reset("big2");
return false;
});
$(".vignette03").click(function() {
reset("big3");
return false;
});
$(".vignette04").click(function() {
reset("big4");
return false;
});
});
$("#big1").toggle(false);
$("#big2").toggle(false);
$("#big3").toggle(false);
$("#big4").toggle(false);
// To scroll :
$(document).ready(function() {
$('html, body').animate({
scrollTop: $('div#topdocpart').offset().top
}, 800, 'easeOutCirc');
});
$(function() {
$('.vignette a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000, 'easeOutCirc');
event.preventDefault();
});
});
//load pages on click on small preview open a html content in #bigonglet
$(document).ready(function() {
$('.vignette2 a').click(function() {
var url = $('.onglet2 a').attr('href');
$('#bigonglet').load(url);
return false;
});
$('.vignette1 a').click(function() {
var url = $('.onglet1 a').attr('href');
$('#bigonglet').load(url);
return false;
});
});
</script>
自分では解決できない問題があります。昨夜、それを解決しようとして髪の半分を失いました;）。このウェブサイトのNIIIIIIIIIICE（そして才能のある）人が私を助けてくれるなら、それはとてもクールなはずです. jQueryで画像ギャラリーのようなものを作ってみた...
プレビュー(ページ 1 とページ 2 のリンクをクリックしないでください)
主なアイデアは、いくつかの外部 html ページにロードされたいくつかのコンテンツをslidetoggle で垂直に展開することです。機能していないことがわかります。
1-html コンテンツが表示される前に遅延させる方法は?
- スライドトグルが展開されるのを待つか、遅延を定義します
2-どのように:
- ボタンを再クリックしたときに既に開いている現在の html コンテンツを閉じるには?
- 既に開いている現在の html コンテンツを閉じて、新しいものを開くには?
ご覧のとおり、スクロール機能もあります (クリックすると、各大きなプレビューにスクロールします)。
-各ボタンでこれらの 3 つのアクションを再グループ化する方法は?
スクロール、スライドトグル、遅延を伴う外部 HTML の読み込み。
ご助力ありがとうございます。がんばりますが、レベルが低いです。
(必要に応じて、これは html です)
<!-- Part Top div -->
<div class="part" id="topdocpart"></div>
<!-- Header -->
<div id="header">
<!-- the href of .onglet is loaded in #bigonglet -->
<ul>
<li class="onglet onglet1"><a href="creations/page01.html">Page1</a></li>
<li class="onglet onglet2"><a href="creations/page02.html">Page2</a></li>
</ul>
<!-- this div load the iframe content-->
<div id="bigonglet"></div>
<!-- those div allows to slide vertically -->
<div class="part" id="part1" style='position:absolute; top:160px;'></div>
<div class="part" id="part2" style='position:absolute; top:340px;'></div>
</div>
<!-- main section -->
<div id="globalcontent">
<div id="content">
<!-- Row 01 : small preview -->
<div class="rowsmallpreview">
<div class="vignette vignette1">
<a href="#part1" class="vignette01"><img src="imbdg/badge01.jpg" width="236" height="130" alt="work01" /></a>
</div>
<div class="vignette vignette2">
<a href="#part1" class="vignette02"><img src="imbdg/badge02.jpg" width="236" height="130" alt="work01" /></a>
</div>
</div>
<!-- Row 01 : big preview to hide (up and down)-->
<div id="big1" class="workview"></div>
<div id="big2" class="workview"></div>
<!-- Row 02 -->
<div class="rowsmallpreview">
<div class="vignette">
<a href="#part2" class="vignette03"><img src="imbdg/badge03.jpg" width="236" height="130" alt="work01" /></a>
</div>
<div class="vignette">
<a href="#part2" class="vignette04"><img src="imbdg/badge04.jpg" width="236" height="130" alt="work01" /></a>
</div>
</div>
<!-- Row 01 : big preview to hide (up and down)-->
<div id="big3" class="workview"></div>
<div id="big4" class="workview"></div>
</div>
</div>
私はこのコードを作りました:
var deployer;
deployer = "";
var url ="";
function deploydown() {
url = $("#"+deployer.substring(0,6)+' a').attr('href');
$("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'}).load(url);
}
function reset(bigno) {
var attendre=false;
var deployno=deployer.substring(0,6);
if((deployer == deployno+"_on") && (deployno != bigno))
{
$("#"+deployno).slideUp({duration: 300, easing: 'easeOutCirc'});
attendre = true;
}
if((deployer == deployno+"_on") && (deployno == bigno))
{
$("#"+deployno).slideUp({duration: 500, easing: 'easeOutCirc'});
attendre = true;
}
if (deployer == bigno+"_on")
deployer = bigno+"_off";
else
deployer = bigno+"_on";
if ((attendre) && (deployno != bigno))
{
setTimeout(deploydown,400);
}
else if ((attendre) && (deployno == bigno))
{
$("#"+deployer.substring(0,6));
}
else
{
deploydown();
}
}
これで、load() load(url) を使用して外部 html をロードしています。
しかし、閉じたときに読み込みを「リセット」する方法は?
たとえば、現在読み込まれている html を空の HTML に切り替えて、slideUpします。次に、slideDown のときに html をリロードします。
ご協力いただきありがとうございます。