aC forum: Image viewing hack http://www.activecollab.com/forums/topic/896/ Recent posts on topic: Image viewing hack en-us Sun, 23 Nov 2008 05:01:41 CST http://www.activecollab.com/forums/post/7961/#post7961 http://www.activecollab.com/forums/post/7961/#post7961 Post #9 by bochenn bochenn anyone can do a hack but using lightbox?

for me it will be usefull as well.

cheers, thanks

]]> Fri, 15 Jun 2007 13:08:05 CDT http://www.activecollab.com/forums/post/7930/#post7930 http://www.activecollab.com/forums/post/7930/#post7930 Post #8 by anabelle anabelle i love this hack, but i have a problem with it, it tries to expand all types of files, and not just images, i manage sound files also, how can i stop highslide from trying to expand sound files?

]]> Mon, 11 Jun 2007 14:14:02 CDT http://www.activecollab.com/forums/post/4380/#post4380 http://www.activecollab.com/forums/post/4380/#post4380 Post #7 by yannisc yannisc 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...

]]> Thu, 02 Nov 2006 14:36:47 CST http://www.activecollab.com/forums/post/4352/#post4352 http://www.activecollab.com/forums/post/4352/#post4352 Post #6 by anianem anianem Great work with highslide.

I agree with dobersch that lightbox is probably a better bet as it is open source. I've used it successfully on a couple of joomla sites I run and think it is an attractive way to view images.

Not sure it really fits well with the minimal nature of aC... it is a bit too fancy. I love aC because it is so simple. A flash image loader maybe too much.

Just my two cents...

]]> Wed, 01 Nov 2006 17:10:50 CST http://www.activecollab.com/forums/post/4073/#post4073 http://www.activecollab.com/forums/post/4073/#post4073 Post #5 by dobersch dobersch 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

]]> Fri, 20 Oct 2006 05:08:52 CDT http://www.activecollab.com/forums/post/4071/#post4071 http://www.activecollab.com/forums/post/4071/#post4071 Post #4 by askeeto askeeto When you click on an image thumbnail it expands to the big version of the picture in an ajax fashion.

Go to this page http://vikjavev.no/highslide/ and click on the images in the "Examples with settings" section. It does exactly that with the thumbnails from the images you uploaded.

]]> Fri, 20 Oct 2006 01:39:05 CDT http://www.activecollab.com/forums/post/4038/#post4038 http://www.activecollab.com/forums/post/4038/#post4038 Post #3 by dobersch dobersch 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

]]> Thu, 19 Oct 2006 11:50:42 CDT http://www.activecollab.com/forums/post/4035/#post4035 http://www.activecollab.com/forums/post/4035/#post4035 Post #2 by karunnt karunnt Does this create a gallery of thumbnail images which allow clicking to enlarge a select image?

Thanks.

]]> Thu, 19 Oct 2006 11:33:10 CDT http://www.activecollab.com/forums/post/4033/#post4033 http://www.activecollab.com/forums/post/4033/#post4033 Post #1 by askeeto askeeto 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;
}

]]> Thu, 19 Oct 2006 09:15:44 CDT