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


    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

×
×
  • Create New...