How to remove lightbox, rollover effects and link gallery item to an article

Nowadays, we can hardly imagine a popular website without stylish and stunning portfolio page. An eye-catching gallery is an exciting opportunity,  in order to present your works and attract more customers to your website. It is well known that everyone wants to make his/her gallery even more flexible for users, so today, we will learn a few tricks that help you to adjust gallery item to your needs.

If lightbox and rollover effects aren’t really your cup of tea, you can easily remove them from your gallery item and link it to the article, for example.

1. First of all, access root directory of your Joomla website using an FTP client or a file manager at the hosting cPanel.

2. There, find the gallery_item.php file that is located under “templates/themeXXXX/html/com_content/category” directory and open it in any code editor like Notepad++, Sublime, Dreamweaver, etc.

3. Now, locate the part of code that starts with  <!– Image  –>. Replace the following line:

   <img src="<?php echo JURI::base().htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>">

   view raw .php hosted with by GitHub

   With the following code:

   <a class="btn btn-info item_more" href="<?php echo $link; ?>"><img src="<?php echo JURI::base().htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"> </a>

   view raw .php hosted with by GitHub
4. Also, comment out the div with more_wrapper class that is located directly under the <!– Image  –> section:
   

   	<!--<div class="more_wrapper">
   	<div class="vert-align">
   	<a class="btn btn-info item_more" href="<?php echo $link; ?>"><span>
   	<?php if (!$params->get('access-view')) :
   	echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
   	elseif ($readmore = $this->item->alternative_readmore) :
   	echo $readmore;
   	if ($params->get('show_readmore_title', 0) != 0) :
   	echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
   	endif;
   	elseif ($params->get('show_readmore_title', 0) == 0) :
   	echo JText::sprintf('TPL_COM_CONTENT_READ_MORE');
   	else :
   	echo JText::_('TPL_COM_CONTENT_READ_MORE');
   	echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
   	endif; ?>
   	</span></a>
   	</div> </div>-->

   view raw .php hosted with by GitHub
5. Do not forget to save the changes in the file.
6. In order to remove rollover effects, add the following CSS rule at the bottom of the template.css  file (under “templates/themeXXXX/css” folder): 

   	.gallery-item .btn {
   	background: none;
   	box-shadow: none;
   	}

   view raw .css hosted with by GitHub

Congratulations, now you can reload the website and enjoy the results of your work!