Pop Up Image

Processwire, Fancybox, Gallery, Pop Up Image

<head> bölümüne:

<link rel="stylesheet" href="fancybox/dist/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// Options will go here
	});
</script>

Fotoğraf Bilgisi olarak EXIF datayı kullanan fonksiyonla birlikte temel kod:

function fotolar() {
foreach (wire('page')->images as $image) {
$thumb=$image->size(200,150);

$exif_url="http://cdeniz.com/".$image->url;
$exif = exif_read_data($exif_url, NULL, true, true);
$tarih= $exif["EXIF"]["DateTimeOriginal"];
$kamera= $exif["IFD0"]["Make"]." ".$exif["IFD0"]["Model"];
$ebatlar= $exif["COMPUTED"]["Width"]. " x ".$exif["COMPUTED"]["Height"];
$apertur= $exif["COMPUTED"]["ApertureFNumber"];
$exposure= $exif["EXIF"]["ExposureTime"];
$iso= $exif["EXIF"]["ISOSpeedRatings"];

$kamera_etiket= __("Kamera");
$ebatlar_etiket= __("Ebatlar");
$ct_etiket=__("Çekim Tarihi: ");
$bilgi= "$kamera_etiket : $kamera | $ebatlar_etiket : $ebatlar | Apertur: $apertur | Exposure: $exposure | ISO: $iso ";

$images .= "<div class='col-sm-4' style='margin-bottom:20px'>
<a  href='$image->url' title='$page->title' data-fancybox='images' data-width='1024' data-caption='$bilgi' >
 <img src='$thumb->url' class='img-responsive img-rounded' alt='$page->title'> </a>
</div>
";

}	// foreach bitti

return $images;	

} // fotolar bitti

Sayfa Bitmeden </body> den hemen önce:

<script src="fancybox30/dist/jquery.fancybox.min.js"></script>