создание галереи с php и javascript

Я использую php для заполнения галереи миниатюр. Когда я нажимаю на большой палец, я запускаю функцию javascript, в которой я хочу поместить фотографию, на которую я щелкнул, в телезрителе с названием div. Я не знаю, как сказать это в моей функции.создание галереи с php и javascript

вот что я до сих пор

<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style>img.thumb{height:100px; display:inline-block;} .thumb{position:relative; display:inline-block;}</style> 

<script type="text/javascript"> 
function showfull(){ 
    console.log("hello"); 
    document.getElementById("viewer").innerHTML = "<? echo '<img onclick="showfull();" id="'.$thispic.'" class="thumb" src = "../images/'.$pic.'"/><br/><h1 id="'.$thistitle.'" class="title">'.$maruja['pictitle'].'</h1><br/><h2 id="'.$thisdescript.'" class="description">'.$maruja['picdesc'].'</h2>'; ?>"; 
} 
</script> 

</head> 
<body> 
<? 
//show categories in dropdown 
$sql = $dbh->prepare("select * from 3304gallcats"); 
$sql->execute(); 
while ($carolyn = $sql->fetch()){ 
    echo '<a href = "index.php?catid='.$carolyn['catid'].'">'.$carolyn['catname'].'</a><br/>'; 
} 

$catid = $_GET['catid']; 
$picsql = $dbh->prepare("select * from 3304gallpix where catid = '$catid'"); 
$picsql->execute(); 
while ($maruja = $picsql->fetch()){ 
    $pic = $maruja['id'].'.jpg' ; 
    $thispic = 'num'.$maruja['id'].'pic'; 
    $thistitle = 'num'.$maruja['id'].'title'; 
    $thisdescript = 'num'.$maruja['id'].'descript'; 
    echo '<img onclick="showfull();" id="'.$thispic.'" class="thumb" src = "../images/'.$pic.'"/><br/><h1 id="'.$thistitle.'" class="title">'.$maruja['pictitle'].'</h1><br/><h2 id="'.$thisdescript.'" class="description">'.$maruja['picdesc'].'</h2>'; 
    //echo '<img src = "./thumbnail.php?pic=../images/'.$pic.'&ht=100&wd=100"/><br/>'.$maruja['pictitle'].'<br/>'.$maruja['picdesc']; 
} 


?> 
<div id="viewer"></div> 

</body>

источник

2013-10-27 Joshua W

Я думаю, что я должен спрашивать то, что делает мой .innerHTML нужно быть равным, отображать рис, на который я нажимаю –

это не очень понятно мне, для чего функция showfull() следует использовать для .. моей предложить является использование JavaScript кода (JQuery), чтобы отобразите окончательное изображение. Скажем мы имеем Пиктограммы DIV и DIV полного изображения: (поместить это в разделе «головы»)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    function showfull(){ 
    $("#thumbnails img").on("click", function() { 
     var clicked_img = $(this).attr("src"); 
     $("#full_image img").attr("src", clicked_img); 
    }); 
    // don't rely on this javascript code as you can find 
    // a lot of plugins for thumbnails on the internet that does this even better 
    } 
</script>

поместите в раздел «тело» (настроить изображение атрибутов, как вам нужно. .)

<div id="thumbnails"></div> 
<div id="full_image"><img src="" alt="" /></div>

.... использовать переменную PHP для создания строки, которая будет отображаться в виде HTML в уменьшенных изображений DIV:

.... 
$html = ''; 
while($maruja = $picsql->fetch()) { 
    // .... stuff .. 
    $html .= '<img onclick="showfull();" src="your-source" etc........ />'; 
}

наконец отобразить эту переменную в программе просмотра DIV

<div id="thumbnails"><?php echo $html; ?></div>

ваш HTML будет выглядеть следующим образом:

<div id="thumbnails"> 
    <img onclick="showfull();" src="your-source" etc........ /> 
    <img onclick="showfull();" src="your-source" etc........ /> 
    <img onclick="showfull();" src="your-source" etc........ /> 
    .... 
</div>

Когда пользователь нажимает на уменьшенной функцию showfull() будет называться. Вот и все. Если вы хотите использовать ваш код, вы должны экранировать кавычки, чтобы избежать ошибок JS:

document.getElementById("viewer").innerHTML = "<img onclick=\"showfull();\" id=\"<?php echo $thispic; ?>\" class=\"thumb\" src=\"<?php echo '../images/' . $pic; ?>\" />";

Я надеюсь, что это помогает ...

источник

2013-10-27 21:05:39 lollo

создание галереи с php и javascript

ответ

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