Перейти к содержанию
  • Кликабельные фотографии в Галерее


    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>

     



    Обратная связь

    Рекомендуемые комментарии

    Только что, Sipsb сказал:

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

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

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты

    Посмотрел, вот, что нового в 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>

     

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты


    Для публикации сообщений создайте учётную запись или авторизуйтесь

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать учетную запись

    Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

    Регистрация нового пользователя

    Войти

    Уже есть аккаунт? Войти в систему.

    Войти


×