Work/fdn2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementazione photoswipe;

Browse Source 
modifica path immagini all'interno di default-skin.css;
la funzione clickable dalle immagini non fa nulla;
This commit is contained in:
Lorenzo Giacomelli
2016-03-24 18:54:12 +01:00
parent b81820271d
commit 0118c3ac14
5 changed files with 127 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
private/lib/media/mediaRenderers/MediaImage.php
+1 -1
View File
@@ -17,7 +17,7 @@ class MediaImage extends MediaRenderer{
if (array_key_exists("clickable", $opt)){
$clickable = $opt["clickable"];
if($clickable){
$click='onclick="javascript:previewImage(\''.GUIHandler::getBaseUrl().'getImage.php?id='.$this->id.'&size='.MediaRendererInterface::SIZE_BIG.'\')"';
// $click='onclick="javascript:loadFoto(\''.$this->id.'\')"';
}
}
public/articolo.php
+122 -23
View File
@@ -107,11 +107,11 @@ try {
}
GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
?>
<div class="imageOverlay" onclick="javascript:hidePreview()">
<!-- <div class="imagePreviewBefore"><img src="images/leftImage.png" /></div>
<div class="imagePreviewAfter"><img src="images/rightImage.png" /></div> -->
<!--<div class="imageOverlay" onclick="javascript:hidePreview()">
<div class="imagePreviewBefore"><img src="images/leftImage.png" /></div>
<div class="imagePreviewAfter"><img src="images/rightImage.png" /></div>
</div>
<div class="clickableImageContainer" onclick="javascript:hidePreview()"></div>
<div class="clickableImageContainer" onclick="javascript:hidePreview()"></div> -->
<div style="width:1000px;margin-left:auto;margin-right:auto;" itemscope itemtype="http://schema.org/Article">
<?php
@@ -128,7 +128,11 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
<div class="headArticolo">
<div class="articoloMainMedia mediaContent" >
<?php if(!is_null($media)) {
$media->renderMedia(array("size"=>MediaRenderer::SIZE_BIG,"clickable"=>true));
?>
<div onclick="javascript:loadImage('<?php echo $media->id;?>')">
<?php $media->renderMedia(array("size"=>MediaRenderer::SIZE_BIG,"clickable"=>true));?>
</div>
<?php
}
?>
</div>
@@ -185,14 +189,26 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
<div class="moreMedia"><span>Altri contenuti</span></div>
</div>
<div class="caroselContainer">
<script type="text/javascript">
var items = [];
</script>
<?php
$i=0;
foreach($medias as $mediaImage){?>
<div class="carosImage mediaContent">
<span class="helper"></span>
<?php $mediaImage->renderMedia(array("size"=>MediaRenderer::SIZE_MINI,"clickable"=>true));?>
</div>
<?php
<div style="display:inline-block;" onclick="javascript:loadImage('<?php echo $i;?>')"><?php $mediaImage->renderMedia(array("size"=>MediaRenderer::SIZE_MINI,"clickable"=>true));?></div>
</div>
<script type="text/javascript">
var ele ={
src: '<?php echo GUIHandler::getBaseUrl()."getImage.php?id=".$mediaImage->id."&size=".MediaRenderer::SIZE_BIG;?>',
w:<?php echo MediaRenderer::SIZE_BIG_W;?>,
h:<?php echo MediaRenderer::SIZE_BIG_H;?>
}
items.push(ele);
</script>
<?php
$i++;
}
?>
</div>
@@ -261,8 +277,98 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
GUIHandler::generateFooter();
?>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<!-- Eliminato share <button class="pswp__button pswp__button--share" title="Share"></button> -->
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<?php
if(sizeof($medias)>0){
?>
function loadImage(pos){
// var position = items.indexOf(imageId);
var pswpElement = document.querySelectorAll('.pswp')[0];
//build items array
//define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: pos // start at slide
};
// alert(items);
//Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
<?php
}
?>
$(document).ready(function(event){
$("#submit").click(function (){
@@ -310,19 +416,12 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
});
<?php }
?>
// $("form#commentoForm").on('submit',function (){
// $.ajax({
// type:'post',
// url:'sendCommentoBackend.php',
// dataType:'html',
// data:$("#commentoForm").serialize(),
// target: '#sentMessage',
// complete: function(){
// $("#commentoArea").remove();
// }
// });
// });
});
<?php
// if(sizeof($medias)>0){?>
<?php
// }
?>
});
</script>
<?php GUIHandler::generateGoogleAnalyticsScripts();?>
public/js/functions.js
+1 -1
View File
@@ -74,4 +74,4 @@ function hidePreview(){
$('.imageOverlay').css("display","none");
$('.clickableImageContainer').css("display","none");
$('#clickImage').remove();
}
}
public/style/default-skin.css
+2 -2
View File
@@ -52,7 +52,7 @@
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url(default-skin.png) 0 0 no-repeat;
background: url(../images/default-skin.png) 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px; }
@@ -62,7 +62,7 @@
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url(default-skin.svg); }
background-image: url(../images/default-skin.svg); }
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none; } }
public/style/public.css
+1 -1
View File
@@ -369,7 +369,7 @@ display: inline-block;
.carosImage{width:85px;height:100%;display:inline-block;vertical-align:middle;text-align:center;}
.carosImage > .helper{height:100%;display:inline-block;vertical-align:middle;}
.carosImage > img {vertical-align:middle; cursor:pointer;}
.carosImage > div {vertical-align:middle; cursor:pointer;}
.commentiContainer{padding:5px;}
.oldCommentiContainer{margin:5px 0px; padding-left: 30px;}