묻고답하기
body내 스크립트삽입문제
2009.07.21 15:10
원래 소스는 아래와 같습니다.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Galleriffic | Advanced Example</title>
<link rel="stylesheet" href="./css/basic.css" type="text/css" />
<link rel="stylesheet" href="./css/galleriffic.css" type="text/css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.galleriffic.js"></script>
</head>
<body>
<div id="page">
<div id="container">
<h1><a
href="./index.html">Galleriffic</a>
» Advanced Example</h1>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="caption" class="embox"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb"
href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg"
title="Title #22">
<img
src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg"
alt="Title #22" />
</a>
<div class="caption">
<div class="download">
<a
href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download
Original</a>
</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
</div>
</li>
<li>
<a class="thumb"
href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg"
title="Title #23">
<img
src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg"
alt="Title #23" />
</a>
<div class="caption">
<div class="download">
<a
href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download
Original</a>
</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
</div>
</li>
</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">© 2009 Trent Foley</div>
</body>
</html>
그런데 저는 이 소스를 수정해서 외부페이지 모듈로 test/index.html을 불러와서 사용중입니다.
index.html 내용에는 DTD / 해드 / 바디 제거후 내용만 넣었습니다.
<div>어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고
어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고</div>
<div>어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고
어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고</div>
<div>어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고
어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고</div>
어쩌고 저쩌고어쩌고 저쩌고어쩌고 저쩌고</div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float'+
'+
' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('+
'.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery').galleriffic('#thumbs', {
delay: 2000,
numThumbs: 12,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '+
'#caption'+
',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: '+
'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#caption').fadeOut('fast');
$('#slideshow').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow, #caption').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs ul.thumbs').fadeIn('fast');
}
});
});
</script>
스크립트를 빼면 원하는형태로는 안보이지만 불러와 지기는 하는데
스크립트를 넣으면 아예 백지화 됩니다.
