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!
Thanks Skittles, for this great tip!
It didn't work out of the box for me but after studying the other widgets I realised that you had to rename the js-file to widget.js for it to work.
So, don't forget to rename the highslide js-file you want to use to widget.js!
Hi there!
Thx @ skittles for that idea and code.
I followed your instructions carefully, but if i click on an image, the small black loading-bar inside the thumbnail never stops loading.
I use 4.1.8 highslide. and Projectpier 0.8.0.3.
Which versions did u use?
Need some help here. Would be VERY greatful.
Ah ok, i tried the lightbox method and it worked for me. Thx!
When I downloaded the zip file, all it contained was index.htm. I made the file changes and grabbed the js file and renamed it "widget.js". Now when I go to the file, it's linked but like yours did, shows the black loading line. Someone help?
instaling the new plugLink Cloaking