2017-09-03 3 views
0

PHP에서 나쁘지는 않지만 Javascript는 이상한 모양의 PHP이며, 종종이 접근법을 반영합니다. 그것은 이상하게 행동하고, 나는 왜 그런지 모른다. 제 지식이 부족한 걸 용서해주십시오.PHP 및 Javascript 그림 갤러리 challenge - 모달이 올바른 이미지를 표시하지 않습니다.

나는 자바 스크립트뿐만 아니라 PHP를 사용하여 사진 갤러리를 프로그래밍하고있다. 사이트에 사진 갤러리가 하나만 있으면 잘 작동합니다. http://pilgrimstudio.ch/

하지만 동일한 사이트에 두 번째 갤러리가있는 경우 모달이 작동하지 않습니다. 나는 여러 가지 일을 시도했지만 아무 것도 효과가 없었습니다. 나는 다른 종류의 이상한 행동으로 끝을 맺었습니다. Javascript가 제대로 사진을 다루지 않는 것 같지만 왜 보이지 않습니다. 다음은 이상한 현재 종류입니다 : http://pilgrimstudio.ch/News (모달에는 첫 번째 그림 만 표시되고 축소판은 없으며 탐색 기능이 작동하지 않습니다).

<?php 
 

 
// THIS IS ON THE SITE 
 

 
$id = 1; 
 

 
$images = array(); 
 
$images[] = array("C37AC30Harmonia/C37.jpg"=>"Die Studer C 37 R&ouml;hren Bandmaschine"); 
 
$images[] = array("C37AC30Harmonia/Harmonia.jpg"=>"Zwei der drei neuen Harmonia"); 
 
$images[] = array("C37AC30Harmonia/PumpHarmonium.jpg"=>"Das sehr seltene Pump-Harmonium"); 
 

 
three_images_row($images, $id); 
 
$id++; 
 

 
// THE FOLLOWING IS IN FUNCTIONS.INC.PHP 
 

 
function three_images_row($images3row, $id) { 
 

 
// MAIN PAGE PICTURE TABLE 
 

 
\t echo '<table width="100%" border="0" align="center"> 
 
\t <tr> '; 
 
\t 
 
\t $number = 1; 
 
\t $position = array("left", "center", "right"); 
 
\t $position_number = 0; 
 

 
\t foreach($images3row AS $index => $value) { 
 

 
\t \t foreach($value AS $pic => $desc) { 
 

 
\t \t \t echo ' 
 
\t \t \t <td> 
 
\t \t \t <div align="'.$position[$position_number].'"> 
 
\t \t \t <img class = "img_3" src="../images/'.$pic.'" title="'.$desc.'" onclick="openModal'.$id.'();currentSlide'.$id.'('.$number.')"> 
 
\t \t \t </div> 
 
\t \t \t </td>'; 
 

 
\t \t \t $number++; 
 
\t \t \t $position_number++; 
 
\t \t \t 
 
\t \t \t if ($position_number == 3) { 
 
    \t \t 
 
\t \t \t \t echo '</tr><tr>'; 
 
\t \t \t \t $position_number = 0; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
\t echo '</tr> 
 
\t </table>'; 
 

 
// MODAL 
 

 
\t echo '<div id="myModal'.$id.'" class="modal"> 
 
\t <span class="close cursor" onclick="closeModal'.$id.'()">&times;</span> 
 
\t <div class="modal-content">'; 
 

 
\t $number = 1; 
 
\t $count = count($images3row); 
 

 
// Main picture in modal 
 

 
\t foreach($images3row AS $index => $value) { 
 

 
\t \t foreach($value AS $pic => $desc) { 
 
\t \t 
 
\t \t \t echo '<div class="mySlides'.$id.'"> 
 
\t \t \t <!--<div class="numbertext">'.$number.'/'.$count.'</div>--> 
 
\t \t \t <img src="../images/'.$pic.'" style="width:100%"> 
 
\t \t \t </div>'; 
 
\t \t \t $number++; 
 
\t \t } 
 
\t } 
 

 
// Navigation in modal 
 

 
\t echo '<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
\t <a class="next" onclick="plusSlides(1)">&#10095;</a>'; 
 

 
// Caption (= description) 
 

 
\t echo '<div class="caption-container"> 
 
\t <p id="caption'.$id.'"></p> 
 
\t </div>'; 
 
\t 
 
// Column (= thumbnails) 
 

 
\t echo '<div class="column-container">'; 
 

 
\t $number = 1; 
 

 
\t foreach($images3row AS $index => $value) { 
 

 
\t \t foreach($value AS $pic => $desc) { 
 

 
\t \t \t echo' <div class="column"> 
 
\t \t \t <img class="demo'.$id.' cursor" src="../images/'.$pic.'" onclick="currentSlide'.$id.'('.$number.')" alt="'.$desc.'"> 
 
\t \t \t </div>'; 
 
\t \t \t $number++; 
 
\t \t } 
 
\t } 
 

 
\t echo '</div> 
 
\t </div> 
 
\t </div>'; 
 
\t 
 
\t ?> 
 
\t 
 
\t <script> 
 
\t function openModal<?php echo $id?>() { 
 
\t document.getElementById('myModal<?php echo $id?>').style.display = "block"; 
 
\t } 
 

 
\t function closeModal<?php echo $id?>() { 
 
\t document.getElementById('myModal<?php echo $id?>').style.display = "none"; 
 
\t } 
 

 
\t function currentSlide<?php echo $id?>(n) { 
 
\t showSlides(slideIndex = n); 
 
\t } 
 
\t 
 
\t var slideIndex = 1; 
 
\t showSlides(slideIndex); 
 

 
\t function showSlides(n) { 
 
\t var i; 
 
\t var slides = document.getElementsByClassName("mySlides<?php echo $id?>"); 
 
\t var dots = document.getElementsByClassName("demo<?php echo $id?>"); 
 
\t var captionText = document.getElementById("caption<?php echo $id?>"); 
 
\t if (n > slides.length) {slideIndex = 1} 
 
\t if (n < 1) {slideIndex = slides.length} 
 
\t for (i = 0; i < slides.length; i++) { 
 
\t  slides[i].style.display = "none"; 
 
\t } 
 
\t for (i = 0; i < dots.length; i++) { 
 
\t  dots[i].className = dots[i].className.replace(" active", ""); 
 
\t } 
 
\t slides[slideIndex-1].style.display = "block"; 
 
\t dots[slideIndex-1].className += " active"; 
 
\t captionText.innerHTML = dots[slideIndex-1].alt; 
 
\t } 
 
\t </script> 
 
\t 
 
\t <?php 
 
} 
 
\t \t 
 
?> 
 
\t <script> 
 
\t function plusSlides(n) { 
 
\t showSlides(slideIndex += n); 
 
\t } 
 
\t </script>

내가 올바른 참조를 설정하려고 시도와 함께해야 할 일을했을 내가 PHP 함수로 자바 스크립트 기능의 몇 가지를 넣어 이유를 추측 : 여기

코드입니다 사진 (하지만 나는 시도한 모든 유사 콘텐츠를 기억하지 않습니다). 그리고 나는 분명히 그것으로 성공하지 못했습니다. 어쩌면 전체 코드에 결함이있어 훨씬 더 잘 수행 될 수 있습니까?

도움에 감사드립니다! 그리고 다시, dilletic Javascript를 유감스럽게 생각합니다.

답변

0

두 가지 모달에 대해 plusSlides() 함수가 필요합니다. 현재 은 모두 모달 1 이미지 링크가 화면에없는 모달 2 이미지를 표시하도록하는 것과 동일한 것을 호출합니다. 이에 plusSlides 기능 (코드에서 묘사되지 않음)

function currentSlide<?php echo $id?>(n) { 
    showSlides<?php echo $id?>(slideIndex = n); 
} 

var slideIndex = 1; 
showSlides<?php echo $id?>(slideIndex); 

function showSlides<?php echo $id?>(n) { 
    var i; 

그리고 업데이트 :

function plusSlides1(n) { 
    showSlides1(slideIndex += n); 
} 
function plusSlides2(n) { 
    showSlides2(slideIndex += n); 
} 
을 그 다음에이 부분을 변경

// Navigation in modal 

echo '<a class="prev" onclick="plusSlides".$id."(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides".$id."(1)">&#10095;</a>'; 

:

는이 부분을 변경 제안합니다

어쩌면 plusSlides1(n)plusSlides2(n) 함수를 PHP로 가져 오십시오. 다른 사람들과 동적으로 렌더링하는 코드?

+0

와우, 늦은 답장을 용서해주십시오! 나는 지금 막이 모든 위대한 답장을 보았고, 나는 그것을 읽고 이해할 시간이 필요하다. 그들 대단히 감사합니다! 누군가가 대답하면 전자 메일로 통보 될 것이라는 인상하에 있었지만 분명히 그렇지 않았습니다. 분명히 내 설정을 변경해야합니다. – Rumi

0

귀하의 디자인 컨셉, 프로그래머 등의가, 코드 캡슐화 옆에 function의 아이디어는, 재사용 할 내가 그렇게 말할 수있는 경우 : 다른 언어로 JS에서

를 최적화하지 않습니다 작은 있습니다 또는 두 번 이상 사용하십시오. 잠재적으로 다른 ID에 대해 동일한 작업을 수행하는 함수를 작성하고 있습니다.

function openModal(id) { 
    document.getElementById(id).style.display = "block"; 
} 
function closeModal(id) { 
    document.getElementById(id).style.display = "none"; 
} 

function currentSlide(n) { 
    showSlides(n); 
} 

는 물론 이미지 코드 같은 것을 볼 것이다 : 그래서 아이디 자체가 매개 변수를 만들 것

<img class = "img_3" src="../images/'.$pic.'" title="'.$desc.'" onclick="openModal(\'myModal'.$id.'\');currentSlide('.$number.')"> 

을하지만 이것은 당신이 일이 무엇인지 확인하기 위해 단지이다.

더 나은 접근 방식은 PHP에서 데이터 (이미지와 캡션이있는 배열) 만 보내고 클라이언트 측에서 사용자 인터페이스를 빌드하는 것입니다. 당신이 만들 수

td.innerHTML = "<div><img src='...' ></div>"; 

그래서 사용 JS :로 설정할 수 있습니다

td = document.createEelement('tr') // or td or div or img 

HTML 콘텐츠 : 는, div의이 이미지는 쉽게와 JS에서 만들 수있는 테이블 셀을 사용하는 모든 thse elemnets 생각 UI를 easiy이 필요합니다

var url = "http://pilgrimstudio.ch/images/", 
 
    images = [ 
 
    ["Studio_Bilder_Pele/Recording_1.png", "Der Aufnahmeraum 2"], 
 
    ["Studio_Bilder_Pele/Regie_1.png", "Regie 1 früher"], 
 
    ["2016-02-01%2015.36.22.jpg", "Regie 1"], 
 
    ["Studio_Bilder_Pele/Regie_2.png", "Regie 2"] 
 
    ]; 
 

 
function buildSlide(id, images) { 
 
    var tr, s = ''; 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (i % 3 == 0) { 
 
     tr = document.createElement('tr'); 
 
     document.getElementById(id).appendChild(tr); 
 
    } 
 
    tr.innerHTML += `<td><img width="200" src="${url+images[i][0]}"</td>`; 
 
    } 
 

 
} 
 
buildSlide('gal1', images);
td img { 
 
    height: 140px; 
 
    overflow: hidden; 
 
}
<table id="gal1"> 
 
</table>

이 방법을 사용하면 서버 측 코드를 클라이언트 측 코드와 분리 할 수 ​​있으며 이는 사용자가 좀 더 명확하게 유지하는 데 도움이 될 수 있습니다.

관련 문제