1
저는 anythingslider와 colorbox를 사용하여 전자 책의 종류 인 수평으로 움직이는 페이지를 만듭니다. Firefox 및 Safari에서는 멋지게 작동하지만 IE8에서는 작동하지 않는 탐색을 만들기 위해 anythingslider에서 'nav (to)'기능을 구현했습니다. 실망스러운 것은 슬라이더 부분이 여전히 작동한다는 것입니다. 왼쪽과 오른쪽으로 이동하며 탐색으로는 '페이지'(실제로는 목록 항목)로 바로 이동하지 않습니다. 필자는 IE8에서 일부 구문이 까다 롭다 고 생각하지만, 내 삶을 살릴 수는 없다.IE8에서 자바 스크립트 탐색이 작동하지 않습니다.
완전한 공개를 위해이 페이지의 코드는 원래 InDesign 문서를 HTML로 변환하는 in5를 사용하여 작성되었습니다. 그것은 다소 슬픈 일이고 내가 원한 모든 것을하지 않기 때문에 약 2 주간 손으로 코딩하여 조정할 수 있습니다. (그리고 2 주일 동안 왜 잘못되었는지 알 수없는 이유를 설명해야합니다. 분명하지 않은 경우, 나는 신참입니다.)
나는 stackoverflow, github 및 csstricks를 비롯한 모든 답변을 검색했습니다. 내 특정 문제가있는 사람을 찾을 수 없으며 비슷한 문제에 대한 답변은 이미 수행했거나 기쁨없이 구현 한 것입니다. IE8을 설명하기 위해 메타 태그를 수정했습니다. 내 탐색이 외부 .js 파일에 정의되어있는 곳을 정확히 찾을 수 있도록 javascript 파일을 아름답게했습니다. (그리고 필자는 그것을 발견했지만 필자가 뭘보고 있는지 완전히 이해할 수있는 자바 프로그래머가 아닙니다.) 모든 일이 ginormous 한 것입니다 - -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BestBrands2013</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="assets/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="assets/css/theme-minimalist-square.css">
<link rel="stylesheet" href="assets/css/pages.css">
<script type="text/javascript" >
var touchEnabled = 'ontouchstart' in document.documentElement;
var useSwipe = 1;
var pageMode = 'h';
var nav;
$(function(){
if($.colorbox) {
$('.lightbox').colorbox({iframe:true, width:"80%", height:"80%"});
$('.thumb').colorbox({maxWidth:"85%", maxHeight:"85%"});
}
$('img').bind('dragstart', function(event) { event.preventDefault(); });
$('.pageItem').each(function(){
if($(this).is('[onclick]')){
if(touchEnabled) {
//this.setAttribute('touchstart', this.getAttribute('onclick'));
//this.removeAttribute('onclick');
} else this.style.cursor = 'pointer';
}
});
if($.hasOwnProperty('scrollTo')){
nav = { numPages:$('.pages .page').length,
back:function(ref){var targ=$(ref).parent('.page').prev()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
next:function(ref){var targ=$(ref).parent('.page').next()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
first:function(){$.scrollTo($('.page')[0], 500)},
last:function(){$.scrollTo($('.page')[nav.numPages-1], 500)},
to:function(n){$.scrollTo($('.page')[n-1], 500)} };
}
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
var sliderSettings = {
mode: pageMode,
theme: 'minimalist-square',
buildArrows: (!touchEnabled && 1),
buildNavigation: false,
buildStartStop: false,
hashTags: false,
infiniteSlides: false,
stopAtEnd: true,
onInitialized: function(e, slider) {
playvid(slider);
nav = {
numPages:slider.pages,
current:slider.currentPage,
next:function(){slider.goForward();},
back:function(){slider.goBack();},
first:function(){this.to(1);},
last:function(){this.to(this.numPages)},
to:function(n){slider.gotoPage(n);}
};
if(useSwipe) {
var container = $('#container');
var vertMode = (pageMode.substr(0,1) == "v");
container.swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
switch(direction) {
case "left":
if(!vertMode) nav.next();
break;
case "right":
if(!vertMode) nav.back();
break;
case "up":
if(vertMode) nav.next();
break;
case "down":
if(vertMode) nav.back();
break;
}
}
});
}
},
}
$('#slider').anythingSlider(sliderSettings);
});
</script>
</head>
<body>
<div id="container">
<ul class="pages" id="slider">
<li class="page">
<img class="pageItem" src="assets/images/item_16.png" alt="page item"/>
<a href = "javascript:void(0)" onclick = "document.getElementById('popclinique').style.display='block';document.getElementById('fade').style.display='block'">
<img class="pageItem" src="assets/images/item_17.png" style="left:165px; top:116px; " alt="page item"/>
</a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8520&cm_sp=ebook-_-30513-_-bb_p2_clinique_sun" target="_blank"><img class="pageItem" src="assets/images/item_18.png" style="left:85px; top:381px; " alt="Clinique Sun"/></a>
<a href = "javascript:void(0)" onclick = "document.getElementById('popmilstar').style.display='block';document.getElementById('fade').style.display='block'">
<img class="pageItem" src="assets/images/item_19.png" style="left:38px; top:567px; " alt="page item"/>
</a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8517&cm_sp=ebook-_-30513-_-bb_p2_clinique_fragrance" target="_blank"><img class="pageItem" src="assets/images/item_20.png" style="left:271px; top:210px; " alt="Clinique Fragrance"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8523&cm_sp=ebook-_-30513-_-bb_p2_clinique_mens" target="_blank"><img class="pageItem" src="assets/images/item_21.png" style="left:436px; top:207px; " alt="Clinique Mens"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8501&cm_sp=ebook-_-30513-_-bb_p2_clinique_3step" target="_blank"><img class="pageItem" src="assets/images/item_22.png" style="left:591px; top:318px; " alt="Clinique 3 Step"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8512&cm_sp=ebook-_-30513-_-bb_p2_clinique_makeup" target="_blank"><img class="pageItem" src="assets/images/item_23.png" style="left:864px; top:350px; " alt="Clinique Makeup"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8505&cm_sp=ebook-_-30513-_-bb_p2_clinique_skincare" target="_blank"><img class="pageItem" src="assets/images/item_24.png" style="left:696px; top:47px; " alt="Clinique Skin Care"/></a>
<button class="pageItem" style="left:217px; top:641px; " alt="clinique 11" id="item26" onclick="nav.to(2);"> </button>
<button class="pageItem" style="left:271px; top:641px; " alt="nikebutton 11" id="item27" onclick="nav.to(3);"> </button>
<button class="pageItem" style="left:325px; top:641px; " alt="underarmourbuttpn 11" id="item28" onclick="nav.to(4);"> </button>
<button class="pageItem" style="left:379px; top:641px; " alt="coachbutton 11" id="item29" onclick="nav.to(5);"> </button>
<button class="pageItem" style="left:433px; top:641px; " alt="fossilbutton 11" id="item30" onclick="nav.to(6);"> </button>
<button class="pageItem" style="left:487px; top:641px; " alt="keurigbutton 11" id="item31" onclick="nav.to(7);"> </button>
<button class="pageItem" style="left:541px; top:641px; " alt="dellbutton 11" id="item32" onclick="nav.to(8);"> </button>
<button class="pageItem" style="left:595px; top:641px; " alt="applebutton 11" id="item33" onclick="nav.to(9);"> </button>
<button class="pageItem" style="left:649px; top:641px; " alt="dysonbutton 11" id="item34" onclick="nav.to(10);"> </button>
<button class="pageItem" style="left:703px; top:641px; " alt="samsungbutton 11" id="item35" onclick="nav.to(11);"> </button>
<button class="pageItem" style="left:757px; top:641px; " alt="knmorebutton 11" id="item36" onclick="nav.to(12);"> </button>
<img class="pageItem" src="assets/images/item_25.png" style="left:16px; top:12px; " alt="page item"/>
</li>
</body>
나는 그것을 많이 생략했지만 그 전체 헤드 섹션 :
그래서 여기에 코드입니다. 나는 하나의 '페이지'(실제로는 목록 항목) 만 포함했습니다. 관련 비트는 onclick = "nav.to (n);"입니다. 끝 부분에있는 단추, 머리말 가까이에있는 스크립트의 slidersettings 블록에있는 탐색 정의가 있습니다.
나는 모두가 아마도 실제 프로그래밍 문제를 가지고 있으며, 우선 순위 목록에서 나의 약한 프로그래밍 노력이 부족하다고 생각하지만 필자는 필자가 할 수있는 한 빨리이 자료를 배우려고 애쓴다. 제공 할 수 있습니다.
감사합니다! 나는 그것을 닦으려고했지만 그 것을 놓쳤습니다. 불행히도, 그것은 그것을 고치지 못했습니다. 내가 (이전에 언급 했어야하는) 오류는 'nav가 null이거나 객체가 아닙니다.'라는 오류입니다. 나는 그것이 꽤 확신했기 때문에 놀랍습니다. – InfinityMax
나는이 곳의 녹색 체크 표시를 앞섰다. 많은 추가 테스트를 통해이 문제는 보안 조치로 많은 IE를 사용할 수 없도록 만드는 업무용 방화벽으로 인해 발생했다고 믿습니다. 정부 비법의 비잔틴 미로를 해결하기보다는, IE의 스타일 시트를 작성하여 네비게이션의 디스플레이를 '없음'으로 설정하여 문제를 완전히 없앴습니다. 그것은 IE가 아닌 모든 컴퓨터에서 훌륭하게 작동합니다. – InfinityMax