I am using activecollab to manage the renovation of our house and it involves a lot of images with samples of floors etc... I find the standard way of viewing the images is a little bit too cumbersome, so I integrated the highslide javascript ( http://vikjavev.no/highslide/ ) in the pages.

please note that the library is free for non commercial use and 30$ for commercial use.

To implement it in activecollab make the following changes.
Iin the files
\activecollab\application\layouts\account.php
\activecollab\application\layouts\administration.php
\activecollab\application\layouts\dashboard.php
\activecollab\application\layouts\project_website.php

replace the line

<?php echo render_page_head() ?>

by the following code

<?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>

Then in the following files
\activecollab\application\views\files\file_details.php
\activecollab\application\views\files\index.php
replace the code

<img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" id="<?php echo clean($file->getFilename()) ?>" />

by the following code

      <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>

Then copy the content of the hishslide folder from the higslide.zip archive to the folder
\activecollab\public\assets\javascript\widgets\highslide\
(If the highslide.js file is in the root of that folder you unzipped correctly.)

rename highslide.js to widget.js and create a text file widget.css and copy paste the following code in that 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;
}

Yeah askeeto, would be really nice, if you could take a screenshot of the outcome and post the link here in the thread.

cheers,
Gabriel

Thanks askeeto for the explanation. I think the idea ist pretty cool, and it's closely related to some earlier posts of mine where I made a feature request for a better image accessability in the file section.

What I like about your solution is, that there's no need to open up another window, but I don't think that your solution will make it into the official aC package, as it's not free for commercial use.

Personally I like lightbox much more, for the following reasons:
* it's free for commercial use (licensed under the Creative Commons Attribution 2.5 License)
* you can right-click the opened picture to save it (this only works in Opera with highslide)
* it's free ;)

On the other hand, "highslide" has some advantages too, as being able to drag pics around or the possibility to open up more than one picture. But I could live without that.

Thanks again for publishing your "hack", so that anyone could reproduce your customization.

Ilija, what do you think of an inclusion of such functionality (maybe through "lightbox") in a future version of aC?

What do the other aC users think?

cheers,
Gabriel

I tried to implement the above hack, but doesn't seem to work. I use 0.7RC2. Are you sure it works? When I click on an image, nothing happens...

anyone can do a hack but using lightbox?

for me it will be usefull as well.

cheers, thanks