0
건물중인 포트폴리오 사이트에 간단한 문제가있는 것 같습니다. 사용자가 프로젝트 이미지를 클릭하면 숨겨진 포함 div가 큰 이미지와 프로젝트에 대한 설명이 포함 된 페이지 상단에 표시됩니다. 샘플 프로젝트 이미지 중 하나를 클릭 할 때 클릭 할 때 고유 ID를 타겟팅하더라도 대형 버전 (숨겨진 이미지 및 프로젝트 설명)이 모두 아래로 내려가는 것을 제외하고는 대부분 작동하도록했습니다. 한 번에 하나의 프로젝트 만 표시하면됩니다. 어떤 도움이라도 대단히 감사합니다.다른 이벤트 인 경우 onclick으로 특정 div를 타겟팅 할 수 없습니다.
조이
http://www.zoeminikes.com/james
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow-images').each(function(){
$(this).cycle({fx:'scrollHorz',
pause: 1,
timeout: 0,
speed: 'fast',
next: $(this).parents('.slideshow-wrap').find('.next'),
prev: $(this).parents('.slideshow-wrap').find('.prev'),
easing: 'easeinout'});
});
$(".btn-close").click(function(){
$('#project-slider').slideToggle('500', 'easeinout');
$('.project-container').removeClass("project-container-active");
return false; //Prevent the browser jump to the link anchor
});
$("#project-slider").hide();
$(".project-container").click(function(){
$.scrollTo('#header', 300, 'easeinout');
$('.project-container').removeClass("project-container-active");
$(this).addClass("project-container-active");
$('#project-slider').slideDown('500', 'easeinout');
return false; //Prevent the browser jump to the link anchor
});
});
</script>
<script type="text/javascript">
function showProject(id){
var project=document.getElementById(id);
project=1;
if(project=='1')
{
project.show();
}
else
{
project.style.display='none';
}
}
</script>
</code><body>
<div id="outerwrap">
<div id="wrap">
<div id="header">
<div id="logo-container">
<div id="logo">
<img src="images/logos/brush-pencil-seal.png" />
</div>
<div id="wordmark">
<a href="index.html"><img src="images/wordmarks/varsity.png" /></a>
</div>
</div>
<div id="nav">
<div id="social-container">
<div class="social-icon" id="social-email">
<a href="mailto:[email protected]?Subject=Hi%20there"><p>email</p></a>
</div>
<div class="social-icon" id="social-facebook">
<a href="https://www.facebook.com/pages/James-Larson/116462605037469" target="_blank"><p>facebook</p></a>
</div>
<div class="social-icon" id="social-behance">
<a href="http://www.behance.net/jameslarson" target="_blank"><p>behance</p></a>
</div>
</div><!--end social-container-->
<div id="all-nav-links">
<div class="nav-link-container" id="portfolio">
<a class="nav-link" id="portfolio-link" href="index.html"><p>PORTFOLIO</p></a>
</div>
<div class="nav-link-container" id="blog">
<a class="nav-link" id="blog-link" href=""><p>BLOG</p></a>
</div>
<div class="nav-link-container" id="windup">
<a class="nav-link" id="windup-link" href=""><p>WIND UP COMICS</p></a>
</div>
<div class="nav-link-container" id="profile">
<a class="nav-link" id="profile-link" href="profile.html"><p>PROFILE</p></a>
</div>
</div>
<div class="new">
</div>
</div><!--end nav-->
</div><!--end header-->
<div id="sawtooth">
</div>
<div id="project-slider">
<div class="project-content" id="windup-content"><?php include("windup.php"); ?></div>
<div class="project-content" id="spill-content"><?php include("spill.php"); ?></div>
</div><!--end project-slider-->
<div id="content">
<div id="projects">
<div class="project-container" id="windup-container"><a href="javascript:; onclick="showProject('windup-content')"></a>
<img src="images/portfolio/thumbs/windup-space.png" />
<div class="caption">
<h1>WIND UP COMICS</h1>
<h2>Pen and ink, digital</h2>
</div>
</a></div>
<div class="project-container" id="spill-container"><a href="javascript:; onclick="showProject()"></a>
<img src="images/portfolio/thumbs/spill.png" />
<div class="caption">
<h1>SPILL</h1>
<h2>Pen and ink, watercolor</h2>
</div>
</a></div>
</div><!--end projects-->
</div><!--end content-->
</div><!--end wrap-->
<div id="footer">
<div id="footer-copy">
<div id="copyright-container">
<p class="footer-text">© Copyright 2011 | James Larson</p>
</div>
<div id="made-container">
<p class="footer-text">Made with love by <a id="zoe-link" href="http://www.zoeminikes.com" target="_blank">Zoe Minikes</a></p>
</div>
</div>
</div>
</div><!--end outerwrap-->
</body>
</html>