1
images 폴더 내의 모든 이미지를로드하는 갤러리를 만들고 있습니다. 갤러리는 PHP를 사용합니다. 나는 이것이 내가 원하는 방식으로 정확하게 작동하도록한다. 그것은 각 div를 생성하고 각각의 개별 id를 할당합니다. 그러나이 오른쪽에 나는 어떤 이미지 위에 마우스를 가져 가면이 영역에 설명이 나타납니다.마우스 오버 기능을 사용하여 각각의 텍스트와 함께 여러 개의 이미지를 처리하는 방법은 무엇입니까?
지금까지 검색 결과가 비어 있었기 때문에 다음 통화 포트였습니다.
표시/숨기기에 하나의 div 요소를 얻을 수 있었지만 여러 번 표시 될 때 나는 그것을 해결할 수 없습니다.
그건 제가 시험해 보는 것입니다.
<html>
<body>
<script>
function mover(){
document.getElementById("visiblediv").style.display="block";
}
function mout() {
document.getElementById("visiblediv").style.display="none";
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
<div id = "div2" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
Doesn't work because using same id?
</div>
</body>
</html>
여기에 갤러리를 생성하고 개별 ID를 할당 지금까지 내가 가지고있는 PHP와 HTML입니다. 해당 이미지가 나타납니다에 내가 그래서 단순히 http://lokeshdhakar.com/projects/lightbox2/
<?php
# SETTINGS
$max_width = 150;
$max_height = 150;
$counter = 1;
function getPictureType($ext) {
if (preg_match('/jpg|jpeg/i', $ext)) {
return 'jpg';
} else if (preg_match('/png/i', $ext)) {
return 'png';
} else if (preg_match('/gif/i', $ext)) {
return 'gif';
} else {
return '';
}
}
function getPictures() {
global $max_width, $max_height;
if ($handle = opendir('images/gallery/')) {
$lightbox = rand();
echo '<ul id="pictures">';
while (($file = readdir($handle)) !== false) {
if (!is_dir('images/'.$file)) {
$split = explode('.', 'images/gallery/'.$file);
$ext = $split[count($split) - 1];
if (($type = getPictureType($ext)) == '') {
continue;
}
if (! is_dir('thumbs')) {
mkdir('thumbs');
}
if (! file_exists('thumbs/'.$file)) {
if ($type == 'jpg') {
$src = imagecreatefromjpeg('images/gallery/'.$file);
} else if ($type == 'png') {
$src = imagecreatefrompng('images/gallery/'.$file);
} else if ($type == 'gif') {
$src = imagecreatefromgif('images/gallery/'.$file);
}
if (($oldW = imagesx($src)) < ($oldH = imagesy($src))) {
$newW = $oldW * ($max_width/$oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height/$oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ($type == 'jpg') {
imagejpeg($new, 'thumbs/'.$file);
} else if ($type == 'png') {
imagepng($new, 'thumbs/'.$file);
} else if ($type == 'gif') {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
global $counter;
echo '<li id="image'.$counter.'"><a href="'.'images/gallery/'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '</a></li>';
$counter++;
}
}
echo '</ul>';
}
}
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--LINKS-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mueseomain.css">
<!--PORTFOLIO ONLY LINKS-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#pictures li {
float:left;
height:<?php echo ($max_height + 15); ?>px;
list-style:none outside;
width:<?php echo ($max_width + 15); ?>px;
text-align:center;
}
#image_area img {
border:5px solid white;
outline:1px solid #ccc;
}
</style>
<!--SCRIPTS-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!--PORTFOLIO ONLY SCRIPTS-->
<script type="text/javascript" src="js/gallery/prototype.js"></script>
<script type="text/javascript" src="js/gallery/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/gallery/lightbox.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="content_wrapper1">
<?php include 'includes/header.php'; ?>
</div>
<div id="content_wrapper2">
<div id="image_wall">
<div id="image_area">
<?php getPictures(); ?>
</div>
<div id="description_area">
<p id="text" class="image1">kasdjfbksdjfhsdfhsdjldfbgsdkfsdklfsdf
ashdfgaskfhgsdjkfhsdlfjkhasdlfkhsdlfkhsdlfj
aksfbhaskdjfhsdjlfhsdlkfhsdlfkhsdlfhsdlfk<?php echo $counter ?></p>
</div>
</div>
</div>
<div id="footer_wrapper">
<?php include 'includes/footer.php'; ?>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
라이트 박스 2 사용 http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/ 에서 갤러리 코드를 사용하고, 그래서 각 이미지에 특정 텍스트 사업부의 마우스 커서를 가져다 대면을하고 싶습니다 설명 영역 및 마우스 아웃시 사라집니다.
아무 것도 명확하게 작성하지 않은 경우 알려 주시기 바랍니다.
자바 스크립트 콘솔에서 어떤 오류가 발생합니까? PHP를 루프에서 잠시 벗어나서 HTML/자바 스크립트 모형으로 작업하십시오. – mkaatman
참고로 페이지에 ID를 두 번 이상 사용하면 안됩니다. 그들은 고유 한 것으로되어 있습니다. –
div 대신 클래스 이름 사용 시도 – theshadowmonkey