Am Ищете помощь для решения этой проблемы, я хотел бы создать простой просмотрщик изображений со следующими характеристиками.Как создать просмотрщик изображений JQuery со следующими и обратными кнопками
- MySQL Fetch изображений
- пользователя Нажмите одно изображение для просмотра (фото-просмотрщик всплывающее окно, выбранное изображение показано)
- Пользователь сможет увидеть СЛЕДУЮЩИЙ изображение, нажав СЛЕДУЮЩИЙ
- Пользователь сможет увидеть ПРЕД изображение, нажав ПРЕД
- на ESC картинную зрителя закрыто
Поскольку я не очень хорошо в JavaScript Nor JQuery, так что я просто применил базовый код для создания следующего кода, который не может удовлетворить минимальным ожиданиям. Вместо того, чтобы показывать выбранное пользователем изображение, отображается первое изображение из неупорядоченного списка и не работает над IE, если я не применяю автоматический запуск функции, которая мне не нужна. Изображение NEXT/PREV должно отображаться только в том случае, если пользователь нажимает next/prev.
<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;
$('#fwd').click(function() {
goFwd();
showPause();
});
$('#back').click(function() {
goBack();
showPause();
});
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut(1000);
if (cur.attr('class') == 'first')
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn(1000);
}
function forward() {
cur.fadeOut(1000);
if (cur.attr('class') == 'last')
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn(1000);
}
// close em_picture on esc press
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
em_picture_close();
}
}
function em_picture_close(){
document.getElementById('b1').style.overflow='auto';
$("#em_picture").hide();
$("#em_viewer").hide();
$(".images_tab").show();
$("#chart").show();
}
</script>
HTML
<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span>
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div>
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>
для тех, кто может понять это другими способами, пожалуйста, так, уже сделал рабочий код принимается
Спасибо и считает
Звуки приветствую сейчас. Думаю, дело в том, что у него достаточно времени, чтобы поиграть с ним, чтобы он соответствовал моему пользовательскому интерфейсу и нажимал next/prev также для получения подробностей/рассказов о картине. Последнее, что я желаю, также удалить скользящие эффекты, эффект затухания и затухания или никакого эффекта будет соответствовать моим потребностям. Но я тоже могу оценить, если вы можете помочь удалить эффекты, чтобы мы могли применять эффект постепенного затухания и исчезновения или даже никакого эффекта. Эффект не должен лежать при обмене с другим, но он должен просто исчезать. Другими словами, я могу сказать, что это работает – codefun