Новое в разработке галереи jQuery

Я чрезвычайно новичок в jQuery. Я пытаюсь создать свою собственную фотогалерею со скрытым изображением, которое появляется только после нажатия на более мелкие изображения. Я не совсем уверен, почему это не работает. Как я уже сказал, я очень новичок в jQuery, и это похоже на очень сложную задачу. Любая помощь с ужесточением кода будет оценена по достоинству. Хотелось бы получить эту функциональность.Новое в разработке галереи jQuery

function gallery() //displays only the first l2 photos in the database. fix it when i figure a workaround for printing all of the thumbnails. 
{ 
try 
{ 
    $album_id = $_GET['id'] ; 
    $db = honneyconnect() ; 
    if(mysqli_connect_error()) 
    { 
     throw new Exception("Could not connect to the database") ; 
    } 
    $query = 'select * from albums where album_id="'.$album_id.'"' ; 
    $albums = $db->query($query) ; 
    $album_name = $albums->fetch_row(); 
    $default_pic = $album_name[1].'/'.$album_name[2] ; 
    $albums->free(); 
    $query = 'select * from photos where album_id="'.$album_id.'"' ; 
    $photos = $db->query($query) ; 
    if(!$photos) 
    { 
     throw new Exception("Query returned zero results.") ; 
    } 
    else 
    { 
     $number_of_photos = $photos->num_rows ; 
     echo "<script type='text/javascript'> array_size = parseInt(".$number_of_photos.") ;</script>" ; //figure out the size of the javascript array of photo sources 
     echo "<script type='text/javascript'> var picture_list = new Array(array_size) ;</script>" ; //define the array 
     echo "<div id='gallery'>" ; 
     echo "<img id='largeImage' src='".$default_pic."' >"; 
     echo "<div id='thumbpanel'>" ; 

     if($number_of_photos > 12) 
     { 
      $stop = 12 ; 
     } 
     else 
     { 
      $stop = $number_of_photos ; 
     } 
     for($i = 0; $i < 12 ; $i++) 
     { 
      $row = $photos->fetch_row() ; 
      if(!$row) 
      { 
       $i = 12 ; 
      } 
      else 
      { 
       $file_path = $album_name[1]."/".$row[2] ; //provides the path for the image source 
       echo "<img value='".$i."' src='".$file_path."'>" ; //assigns the value for use in the jQuery scripts 
       echo "<script type='text/javascript'> picture_list[ parseInt(".$i.") ] = ".$file_path."</script>" ; //sends the values to the jQuery script 
      } 
     } 
     echo "</div></div>" ; 
    } 
     $photos->free(); 
     $db->close(); 
} 
catch(Exception $error) 
{ 
    echo $error ; 
} 
} 
<html> 
<head> 
<style> 
    @import "honeysstyle.css"; 
</style> 
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script> 
<script> 

$(document).ready(function(){ 
var array_size = 0 ; 
var active_index ; 
$('#largeImage').hide() ; 
$('#gallery img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('gallery','large')); 
    $('#largeImage').show() ; 
    active_index = parseInt($(this).attr('value')) ; 

}); 
$('.next').click(function(){ 
    active_index = active_index + 1 ; 
    if(active_index >= array_size) 
    { 
     $(this).hide() ; 
    } 
    if(active_index > 0) 
    { 
     $('.back').show() ; 
    } 
    var source_image = $('#largeImage').attr('src') ; 
    $('#largeImage').attr('src').replace(source_image, picture_list[ active_index ]) ; 


}); 
$('.back').click(function(){ 
    active_index = active_index - 1 ; 
    if(active_index <= 0) 
    { 
     $(this).hide() ; 
    } 
    if(active_index < array_size) 
    { 
     $('.next').show() ; 
    } 
    var source_image = $('#largeImage').attr('src') ; 
    $('#largeImage').attr('src').replace(source_image, picture_list[ active_index ]) ; 

}) ; 
$('.close').click(function{ 
    $('#largeImage').hide() ; 
}) ; 



}); 
</script> 
</head> 
<body> 
<?php 
require('function.php'); 

draw_masthead(); 
gallery(); 



?> 
</body> 

</html>

В настоящее время все изображения рисуются, но ни один из jQuery не работает, и я не уверен, почему. Нет проблем с кодом php. Это выводит следующий HTML-код:

<html> 
<head> 
<style> 
@import "honeysstyle.css"; 
</style> 
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script> 
<script> 

$(document).ready(function(){ 
var array_size = 0 ; 
var active_index ; 
$('#largeImage').hide() ; 
$('#gallery img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('gallery','large')); 
    $('#largeImage').show() ; 
    active_index = parseInt($(this).attr('value')) ; 

}); 
$('.next').click(function(){ 
    active_index = active_index + 1 ; 
    if(active_index >= array_size) 
    { 
     $(this).hide() ; 
    } 
    if(active_index > 0) 
    { 
     $('.back').show() ; 
    } 
    var source_image = $('#largeImage').attr('src') ; 
    $('#largeImage').attr('src').replace(source_image, picture_list[ active_index ]) ; 


}); 
$('.back').click(function(){ 
    active_index = active_index - 1 ; 
    if(active_index <= 0) 
    { 
     $(this).hide() ; 
    } 
    if(active_index < array_size) 
    { 
     $('.next').show() ; 
    } 
    var source_image = $('#largeImage').attr('src') ; 
    $('#largeImage').attr('src').replace(source_image, picture_list[ active_index ]) ; 

}) ; 
$('.close').click(function{ 
    $('#largeImage').hide() ; 
}) ; 



}); 
</script> 
</head> 
<body> 




<div id="container"> 
<div class="photobanner"> 
    <img class="first" src="honeys/Image1.jpg" alt=""> 
    <img src="honeys/Image2.jpg" alt=""> 
    <img src="honeys/Image3.jpg" alt=""> 
    <img src="honeys/Image4.jpg" alt=""> 
    <img src="honeys/Image5.jpg" alt=""> 
    <img src="honeys/Image1.jpg" alt=""> 
    <img src="honeys/Image2.jpg" alt=""> 
    <img src="honeys/Image3.jpg" alt=""> 
    <img src="honeys/Image4.jpg" alt=""> 
</div> 
</div><div id="titlebar">HELL'S CANYON HONEYS ROLLER DERBY</div> 
<div id="nav"> 
<ul> 
<li> 
    <a href="index.php">Home</a> 
</li> 
<li> 
    <a href="news.php">News</a> 
</li> 
<li> 
    <a href="#">Events</a> 
    <ul class="eventnav"> 
     <li><a href="community.php">Community</a></li> 
     <li><a href="bouts.php">Bouts</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">The Team</a> 
    <ul> 
     <li><a href="roster.php">Roster</a></li> 
     <li><a href="albums.php">Albums</a></li> 
    </ul> 
</li> 
<li> 
    <a href="sponsors.php">Sponsors</a> 
</li> 
<li> 
    <a href="social.php">Contact Us</a> 
</li> 
</ul> 
</div> 
    <div id="controlpanel"> 
    <ul> 
    <li> 
     <a href="rosteredit.php">Edit Roster</a> 
    </li> 
    <li> 
     <a href="albums.php">Edit Albums</a> 
    </li> 
    <li> 
     <a href="editevents.php">Edit Events</a> 
    </li> 
    <li> 
     <a href="editnews.php">Edit News</a> 
    </li> 
    <li> 
     <a href="editsponsors.php">Edit Sponsors</a> 
    </li> 
    <li> 
     <a href="editcontact.php">Edit Contact Info</a> 
    </li> 
    <li> 
     <a href="clearsession.php">Log Out</a> 
    </li> 
    </ul> 
    </div><script type='text/javascript'> array_size = parseInt(4) ;</script> <script type='text/javascript'> var picture_list = new Array(array_size) ;</script><div id='gallery'><img id='largeImage' src='rosterpics/Image3.jpg' ><div id='thumbpanel'><img value='0' src='rosterpics/image2.jpg'><script type='text/javascript'> picture_list[ parseInt(0) ] = rosterpics/image2.jpg</script><img value='1' src='rosterpics/Image3.jpg'><script type='text/javascript'> picture_list[ parseInt(1) ] = rosterpics/Image3.jpg</script><img value='2' src='rosterpics/Image4.jpg'><script type='text/javascript'> picture_list[ parseInt(2) ] = rosterpics/Image4.jpg</script><img value='3' src='rosterpics/Image5.jpg'><script type='text/javascript'> picture_list[ parseInt(3) ] = rosterpics/Image5.jpg</script></div></div></body> 

</html>

источник

2014-02-16 NoobWebDev

Можете ли вы дать более подробную информацию о том, что не работает? Это функция php 'gallery()' не создает вашу галерею? Это ваш jQuery не переключается между изображениями? Сейчас это свалка кода, что затрудняет нам помощь. Можете ли вы показать выходной код или воссоздать с помощью http://jsFiddle.net. Одно небольшое изменение заключалось бы в изменении 'for ($ i = 0; $ i <12; $ i ++) {$ row = $ photos-> fetch_row(); if (! $ row) {$ i = 12; } ... 'to' for ($ i = 0; $ i <$ stop; $ i ++) {$ row = $ photos-> fetch_row(); if (! $ row) {$ i = $ stop; } ... ' – Sean

Я только что обновил его. Извините за отсутствие информации для начала. Нет проблем с php, ни один из jQuery не работает. – NoobWebDev

Можете ли вы опубликовать упрощенный html-вывод? – Sean

Из информации, которую вы дали, кажется, что вы допустили ошибку здесь:

$('.close').click(function{ 
     $('#largeImage').hide() ; 
}) ;

Изменить это:

$('.close').click(function(){ 
     $('#largeImage').hide() ; 
}) ;

Для получения дополнительной информации, расскажите нам больше о своем html.

Вы можете использовать консоль разработчика в своем браузере (нажмите F12) и сообщить нам, есть ли у вас какая-либо ошибка.

enter image description here

источник

2014-02-16 04:12:01 phpcoderx

Просматривая консоль разработчика, я не вижу никаких ошибок. Я обновил исходное сообщение с html, который вышел для более удобного просмотра. Я не уверен, что мне нужна функция parseInt(). По сути, я просто пытаюсь скрыть #largeImage от начальной загрузки, а затем показать его и изменить src этого изображения на один из меньших миниатюр. Я не добавил кнопки «назад», «следующий» или «закрыть», поскольку я чувствую, что, если я смогу запустить базовую функциональность, я, вероятно, смогу получить все остальное. – NoobWebDev

В строке 129 (в вашем html), я думаю, вы должны изменить это: picture_list [parseInt (0)] = rosterpics/image2.jpg to picture_list [parseInt (0)] = 'rosterpics/image2.jpg' – phpcoderx

Это фиксировало проблема jQuery вообще не работает. Однако теперь, когда я добавил кнопки .next и .back, они снова скрывают изображение. Я правильно задаю значения массива javascript? Должен ли я удалить функцию parseInt() из числовых значений? – NoobWebDev

Новое в разработке галереи jQuery

ответ

Смежные вопросы