Jump to content
  • Sign in to follow this  

    Кликабельные фотографии в Галерее


    Respected

    В приложении Галерея IPS4 есть кнопка просмотра оригинала фотографии в лайтбоксе, однако, как показывает практика, мало кто обращает на неё внимание, а она делает основной функционал и удобство просмотра фоток. 

    Что мы получим: при клике на фотографию, откроется полноэкранный лайтбокс с фотографией.

    Редактируем шаблона: gallery > front > view > imageFrame:

    Меняем весь код шаблона на:

    <div id='elGalleryImage' data-role="imageFrame" {{if $image->data}}data-imageSizes='{$image->data}'{{endif}}>
    	{{if $image->media }}
    		<div class='cGallery_videoContainer'>
    			{{if in_array( $image->file_type, array( 'video/ogg', 'video/webm', 'video/mp4', 'video/x-flv', 'video/3gpp' ) )}}
    				<video id="elGalleryVideo" data-role="video" class="ipsPos_center video-js vjs-default-skin" controls preload="auto" width="100%" height="100%"{{if $image->medium_file_name }} poster="{file="$image->medium_file_name" extension="gallery_Images"}"{{endif}} data-setup='{"techOrder": ["html5","flash"]}'>
    					<source src="{file="$image->original_file_name" extension="gallery_Images"}" type='{$image->file_type}' />
    				</video>
    			{{else}}
    				<!-- Old fashioned...supports things like wmv though-->
    				<embed wmode="opaque" autoplay="true" showcontrols="true" showstatusbar="true" showtracker="true" src="{file="$image->original_file_name" extension="gallery_Images"}" width="480" height="360" type='{$image->file_type}' />
    			{{endif}}
    		</div>
    	{{else}}
      <a href='{file="$image->masked_file_name" extension="gallery_Images"}' title='Открыть в полном размере' data-ipsTooltip data-ipsLightbox data-ipsLightbox-useEvents>
    		<div class='cGalleryViewImage' data-role='notesWrapper' data-controller='gallery.front.view.notes' data-imageID='{$image->id}' {{if $image->canEdit()}}data-editable{{endif}} data-notesData='{$image->_notes_json}'>
    			
    			<img src='{file="$image->masked_file_name" extension="gallery_Images"}' alt='{$image->caption}' title='{$image->caption}' data-role='theImage' class='ipsHide'>
    			<noscript>
    				<img src='{file="$image->masked_file_name" extension="gallery_Images"}' alt='{$image->caption}' title='{$image->caption}' data-role='theImage'>
    			</noscript>
    			{{if count( $image->_notes )}}
    				<noscript>
    					{{foreach $image->_notes as $note}}
    						<div class='cGalleryNote' style='left: {$note['LEFT']}%; top: {$note['TOP']}%; width: {$note['WIDTH']}%; height: {$note['HEIGHT']}%'>
    							<div class='cGalleryNote_border'></div>
    							<div class='cGalleryNote_note'>{$note['NOTE']}</div>
    						</div>
    					{{endforeach}}
    				</noscript>
    			{{endif}}
    		</div>
    		</a>	
    		<ul class='ipsButton_split cGalleryViewImage_controls'>
    			{{if $image->canEdit()}}
    				<li><a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall ipsJS_show' title='{lang="add_image_note"}' data-action='addNote' data-ipsTooltip><i class='fa fa-pencil-square-o'></i></a></li>
    				<li>
    					<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="rotate_image"}' data-ipsTooltip id='elImage_rotate' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    						<i class='fa fa-rotate-right'></i> <i class='fa fa-caret-down'></i>
    					</a>
    					<ul class='ipsMenu ipsMenu_auto ipsHide' id='elImage_rotate_menu'>
    						<li class='ipsMenu_item'>
    							<a href='{$image->url( 'rotate' )->csrf()->setQueryString( 'direction', 'right' )}' title='{lang="rotate_right"}'>
    								<i class='fa fa-rotate-right'></i> &nbsp;{lang="rotate_right"}
    							</a>
    						</li>
    						<li class='ipsMenu_item'>
    							<a href='{$image->url( 'rotate' )->csrf()->setQueryString( 'direction', 'left' )}' title="{lang="rotate_left"}">
    								<i class='fa fa-rotate-left'></i> &nbsp;{lang="rotate_left"}
    							</a>
    						</li>
    					</ul>
    				</li>
    			{{endif}}
    			{{if count( $image->sizes() ) > 1}}
    				<li>
    					<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="view_all_sizes"}' data-ipsTooltip id='elImageSize' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    						<i class='fa fa-picture-o'></i> <i class='fa fa-caret-down'></i>
    					</a>
    					<ul class='ipsMenu ipsMenu_medium ipsHide' id='elImageSize_menu'>
    						{{foreach $image->sizes() as $k => $dims}}
    							<li class='ipsMenu_item'><a href='{$image->url()->setQueryString( 'imageSize', $k )}'>{$dims[0]}x{$dims[1]}</a></li>
    						{{endforeach}}
    					</ul>
    				</li>
    			{{endif}}
    			{{if ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id ) OR \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() ) || \IPS\Member::loggedIn()->member_id}}
    				<li>
    					{{if ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id ) OR \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() )}}
    						<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' data-ipsTooltip title='{lang="set_image_as"}' id='elImageSetAs' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    							<i class='fa fa-object-group'></i> <i class='fa fa-caret-down'></i>
    						</a>
    						<ul class='ipsMenu ipsMenu_auto ipsHide' id='elImageSetAs_menu'>
    							{{if \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() ) AND ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id )}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'category')->csrf()}'>{lang="cover_category_only"}</a></li>
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'album')->csrf()}'>{lang="cover_album_only"}</a></li>
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'both')->csrf()}'>{lang="cover_both"}</a></li>
    							{{elseif \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() )}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'category')->csrf()}'>{lang="cover_category"}</a></li>
    							{{elseif $image->album_id AND \IPS\Member::loggedIn()->member_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'album')->csrf()}'>{lang="cover_album"}</a></li>
    							{{endif}}
    							{{if \IPS\Member::loggedIn()->member_id}}
    								<li class='ipsMenu_sep'><hr></li>
    								<li class='ipsMenu_item'>
    									<a href='{$image->url('setAsPhoto')->csrf()}' data-action='setAsProfile' title="{lang="set_gallery_image_photo"}">{lang="set_gallery_image_photo"}</a>
    								</li>
    							{{endif}}
    						</ul>
    					{{elseif \IPS\Member::loggedIn()->member_id}}
    						<a href='{$image->url('setAsPhoto')->csrf()}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="set_gallery_image_photo"}'>
    							{lang="set_gallery_image_photo"}
    						</a>
    					{{endif}}
    				</li>
    			{{endif}}
    			<li>
    				<a href='{$image->url('download')}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="download"}' data-ipsTooltip><i class='fa fa-download'></i></a>
    			</li>
    			<li>
    				<a href='{file="$image->masked_file_name" extension="gallery_Images"}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="view_in_lightbox"}' data-ipsTooltip data-ipsLightbox data-ipsLightbox-useEvents><i class='fa fa-expand'></i></a>
    			</li>
    		</ul>
    	{{endif}}
    	<span id='elGalleryImageNav'>
    		{{if $prev}}
    			<a href='{$prev->url()->setQueryString( 'browse', 1 )}' id='elGalleryImageNav_prev' data-action='prevImage' data-imageID='{$prev->id}' title='{$prev->caption}'><i class='fa fa-angle-left'></i></a>
    		{{endif}}
    		{{if $next}}
    			<a href='{$next->url()->setQueryString( 'browse', 1 )}' id='elGalleryImageNav_next' data-action='nextImage' data-imageID='{$next->id}' title='{$next->caption}'><i class='fa fa-angle-right'></i></a>
    		{{endif}}
    	</span>
    </div>

     

    Sign in to follow this  


    User Feedback

    Recommended Comments

    Ой, действително работает! Не проверил, один раз попробовал не сработало, вот и подумал, что код поменялся. :$

    Share this comment


    Link to comment
    Share on other sites
    Только что, Sipsb сказал:

    Ой, действително работает! Не проверил, один раз попробовал не сработало, вот и подумал, что код поменялся. :$

    Такие незначительные шаблоны редко меняются от версии к версии..

    Share this comment


    Link to comment
    Share on other sites

    Посмотрел, вот, что нового в 4.2.

    Спойлер

    2017-09-13_21-08-14.thumb.png.be2e299a3d56b8ee02ebef5ea3408e64.png

    Думаю, так будет правильней для 4.2

    
    <div id='elGalleryImage' data-role="imageFrame" {{if $image->data}}data-imageSizes='{$image->data}'{{endif}}>
    	{{if $image->media }}
    		<div class='cGallery_videoContainer'>
    			{{if in_array( $image->file_type, array( 'video/ogg', 'video/webm', 'video/mp4', 'video/x-flv', 'video/3gpp' ) )}}
    				<video id="elGalleryVideo" data-role="video" class="ipsPos_center video-js vjs-default-skin" controls preload="auto" width="100%" height="100%"{{if $image->medium_file_name }} poster="{file="$image->medium_file_name" extension="gallery_Images"}"{{endif}} data-setup='{"techOrder": ["html5","flash"]}'>
    					<source src="{file="$image->original_file_name" extension="gallery_Images"}" type='{$image->file_type}' />
    				</video>
    			{{else}}
    				<!-- Old fashioned...supports things like wmv though-->
    				<embed wmode="opaque" autoplay="true" showcontrols="true" showstatusbar="true" showtracker="true" src="{file="$image->original_file_name" extension="gallery_Images"}" width="480" height="360" type='{$image->file_type}' />
    			{{endif}}
    		</div>
    	{{else}}
      <a href='{file="$image->masked_file_name" extension="gallery_Images"}' title='Открыть в полном размере' data-ipsTooltip data-ipsLightbox data-ipsLightbox-useEvents>
    		<div class='cGalleryViewImage' data-role='notesWrapper' data-controller='gallery.front.view.notes' data-imageID='{$image->id}' {{if $image->canEdit()}}data-editable{{endif}} data-notesData='{$image->_notes_json}'>
    			
    			<img src='{file="$image->masked_file_name" extension="gallery_Images"}' alt='{$image->caption}' title='{$image->caption}' data-role='theImage' class='ipsHide'>
    			<noscript>
    				<img src='{file="$image->masked_file_name" extension="gallery_Images"}' alt='{$image->caption}' title='{$image->caption}' data-role='theImage'>
    			</noscript>
    			{{if count( $image->_notes )}}
    				<noscript>
    					{{foreach $image->_notes as $note}}
    						<div class='cGalleryNote' style='left: {$note['LEFT']}%; top: {$note['TOP']}%; width: {$note['WIDTH']}%; height: {$note['HEIGHT']}%'>
    							<div class='cGalleryNote_border'></div>
    							<div class='cGalleryNote_note'>{$note['NOTE']}</div>
    						</div>
    					{{endforeach}}
    				</noscript>
    			{{endif}}
    		</div>
    		</a>	
    		<ul class='ipsButton_split cGalleryViewImage_controls'>
    			{{if $image->canEdit()}}
    				<li><a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall ipsJS_show' title='{lang="add_image_note"}' data-action='addNote' data-ipsTooltip><i class='fa fa-pencil-square-o'></i></a></li>
    				<li>
    					<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="rotate_image"}' data-ipsTooltip id='elImage_rotate' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    						<i class='fa fa-rotate-right'></i> <i class='fa fa-caret-down'></i>
    					</a>
    					<ul class='ipsMenu ipsMenu_auto ipsHide' id='elImage_rotate_menu'>
    						<li class='ipsMenu_item'>
    							<a href='{$image->url( 'rotate' )->csrf()->setQueryString( 'direction', 'right' )}' title='{lang="rotate_right"}'>
    								<i class='fa fa-rotate-right'></i> &nbsp;{lang="rotate_right"}
    							</a>
    						</li>
    						<li class='ipsMenu_item'>
    							<a href='{$image->url( 'rotate' )->csrf()->setQueryString( 'direction', 'left' )}' title="{lang="rotate_left"}">
    								<i class='fa fa-rotate-left'></i> &nbsp;{lang="rotate_left"}
    							</a>
    						</li>
    					</ul>
    				</li>
    			{{endif}}
    			{{if count( $image->sizes() ) > 1}}
    				<li>
    					<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="view_all_sizes"}' data-ipsTooltip id='elImageSize' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    						<i class='fa fa-picture-o'></i> <i class='fa fa-caret-down'></i>
    					</a>
    					<ul class='ipsMenu ipsMenu_medium ipsHide' id='elImageSize_menu'>
    						{{foreach $image->sizes() as $k => $dims}}
    							<li class='ipsMenu_item'><a href='{$image->url()->setQueryString( 'imageSize', $k )}'>{$dims[0]}x{$dims[1]}</a></li>
    						{{endforeach}}
    					</ul>
    				</li>
    			{{endif}}
    			{{if ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id ) OR \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() ) || \IPS\Member::loggedIn()->member_id}}
    				<li>
    					{{if ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id ) OR \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() )}}
    						<a href='#' class='ipsButton ipsButton_overlaid ipsButton_verySmall' data-ipsTooltip title='{lang="set_image_as"}' id='elImageSetAs' data-ipsMenu data-ipsMenu-appendTo='#elGalleryImage'>
    							<i class='fa fa-object-group'></i> <i class='fa fa-caret-down'></i>
    						</a>
    						<ul class='ipsMenu ipsMenu_auto ipsHide' id='elImageSetAs_menu'>
    							{{if \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() ) AND ( $image->album_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id )}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'category')->csrf()}'>{lang="cover_category_only"}</a></li>
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'album')->csrf()}'>{lang="cover_album_only"}</a></li>
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'both')->csrf()}'>{lang="cover_both"}</a></li>
    							{{elseif \IPS\gallery\Image::modPermission( 'edit', NULL, $image->container() )}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'category')->csrf()}'>{lang="cover_category"}</a></li>
    							{{elseif $image->album_id AND \IPS\Member::loggedIn()->member_id AND $image->author()->member_id == \IPS\Member::loggedIn()->member_id}}
    								<li class='ipsMenu_item'><a data-action='setAsCover' href='{$image->url()->setQueryString( 'do', 'cover' )->setQueryString( 'set', 'album')->csrf()}'>{lang="cover_album"}</a></li>
    							{{endif}}
    							{{if \IPS\Member::loggedIn()->member_id}}
    								<li class='ipsMenu_sep'><hr></li>
    								<li class='ipsMenu_item'>
    									<a href='{$image->url('setAsPhoto')->csrf()}' data-action='setAsProfile' title="{lang="set_gallery_image_photo"}">{lang="set_gallery_image_photo"}</a>
    								</li>
    							{{endif}}
    						</ul>
    					{{elseif \IPS\Member::loggedIn()->member_id}}
    						<a href='{$image->url('setAsPhoto')->csrf()}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="set_gallery_image_photo"}'>
    							{lang="set_gallery_image_photo"}
    						</a>
    					{{endif}}
    				</li>
    			{{endif}}
    			<li>
    				<a href='{$image->url('download')}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="download"}' data-ipsTooltip><i class='fa fa-download'></i></a>
    			</li>
    			<li>
    				<a href='{file="$image->masked_file_name" extension="gallery_Images"}' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='{lang="view_in_lightbox"}' data-ipsTooltip data-ipsLightbox data-ipsLightbox-useEvents><i class='fa fa-expand'></i></a>
    			</li>
    		</ul>
    	{{endif}}
    	<span id='elGalleryImageNav'>
    		{{if $prev}}
    			<a href='{$prev->url()->setQueryString( 'browse', 1 )}' id='elGalleryImageNav_prev' data-action='prevImage' data-imageID='{$prev->id}' title='{$prev->caption}'><i class='fa fa-angle-left'></i></a>
    		{{endif}}
    		{{if $next}}
    			<a href='{$next->url()->setQueryString( 'browse', 1 )}' id='elGalleryImageNav_next' data-action='nextImage' data-imageID='{$next->id}' title='{$next->caption}'><i class='fa fa-angle-right'></i></a>
    		{{endif}}
    	</span>
    </div>

     

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×