LightBox Effect /Image Pop-Up Effect
I saw a post about adding lightbox effect to attached files. Here is a simple way to add the ligthbox affect to all image files, using highslide.
1.Download Highslide: http://vikjavev.no/highslide/
2.Find and Replace in the following files:
\activecollab\application\layouts\account.php
\activecollab\application\layouts\administration.php
\activecollab\application\layouts\dashboard.php
\activecollab\application\layouts\project_website.php
<?php echo render_page_head() ?>
With:
<?php echo use_widget('highslide') ?>
<?php echo render_page_head() ?>
<script type="text/javascript">
hs.graphicsDir = '/public/assets/javascript/widgets/highslide/graphics/';
window.onload = function() {
hs.preloadImages();
}
</script>3.Find and Replace in the following files:
\activecollab\application\views\files\file_details.php
\activecollab\application\views\files\index.php
<img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" />
With:
<a href="<?php echo $file->getDownloadUrl()?>" class="highslide" onclick="return hs.expand(this)">
<img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" id="<?php echo clean($file->getFilename()) ?>" />
</a>4. Unzip the highslide package, then Copy the folder highslide from the zip package into the folder:
public\assets\javascript\widgets\
5. Create a CSS file named widget.css and save it in the new highslide folder. Then paste this css into the file:
.highslide {
cursor: url(graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
cursor: pointer; /* opera */
cursor: url(graphics/zoomout.cur), pointer;
border: 2px solid white;
}
.highslide-image-blur {
cursor: pointer;
cursor: hand;
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.highslide-loading {
display: block;
color: white;
font-style: normal;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
opacity: 0.60; /* w3c */
filter: alpha(opacity=60); /* ie */
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
padding-left: 22px;
background-image: url(graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
} And that’s it! It may seem tedious, but it’s easier than it looks. Good Luck!