Home Page / extensions / Plugins et autres / Imageflow Highslide

Présentation

ImageFlow est une galerie de photos, qui permet une manipulation très simple des images. L'idée de base est d'animer les vignettes crées générées avec un reflet.
Cette procédé est connu pour avoir été développé par Andrew Coulter Enright. Après avoir été acheté par Apple - il est utilisé maintenant dans iTunes et l'explorateur de fichiers de Apple OSX.
L'innovation de ce projet réside dans la mise en œuvre JavaScript, qui est indépendant de la plateforme. ImageFlow fonctionne avec tous les navigateurs supportant le JavaScript.

Installation

Téléchargez le fichier ifhs.zip

Décompressez le fichier, puis transférez le dossier complet ifhs dans le dossier "frog09x\frog\plugins".

Rendez-vous dans l'interface d'administration de Frog, choisissez l'onglet "Administration", activez le plugin "ifhs".

Il vous reste à insérer le code <?php ifhs(); ?> entre les balises <head> et </head> de votre gabarit.

Utilisation

Reportez-vous dans l'espace code pour avoir un aperçu du code à insérer.

Télécharger

fichier ImageFlow HighSlide (833 fois)

Overview

ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.

This solution is known as the Cover Flow technique, which has been developed by the artist Andrew Coulter Enright. Now - after it has been bought by Apple - it is used in iTunes and the file browser of Apples OSX.

The innovation of this project lies in the JavaScript implementation, which is platform independent. ImageFlow works with every browser, that can handle images and supports JavaScript: And that is something almost 100% of all conventional graphical browsers can do.

Installation

Download the ifhs.zip file

Extract it and copy it to the plugins directory "frog09x\frog\plugins".

Navigate to Administration panel.

Click on the check box in front of ifhs.

Insert the code <?php ifhs(); ?> between <head> and </head> of your layout.

Utilisation

Look at the demo page to see the custom code.

Download

file ImageFlow HighSlide (833 fois)

Highslide

Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites.

Redistribution: You are allowed to distribute Highslide JS with non-commercial packages given that you

a) emphasize on your download page that Highslide JS is not free for commercial use
b) provide a link back to this web page on your download page

Torstein Hønsi Web http://highslide.com/
Highslide JS hack based on version 3.3.12

ImageFlow 0.9

This code is based on Michael L. Perrys Cover flow in Javascript.
For he wrote that "You can take this code and use it as your own" [1] this is my attempt to improve some things. Feel free to use it! If you have any questions on it leave me a message in my shoutbox [2].

The reflection is generated server-sided by a slightly hacked version of Richard Daveys easyreflections [3] written in PHP.

The mouse wheel support is an implementation of Adomas Paltanavicius JavaScript mouse wheel code [4].

Thanks to Stephan Droste ImageFlow is now compatible with Safari 1.x.

[1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981
[2] http://shoutbox.finnrudolph.de/
[3] http://reflection.corephp.co.uk/v2.php
[4] http://adomas.org/javascript-mouse-wheel/

Inline content

HTML content

Move
Close

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.

<div>
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html' } )" class="highslide">
HTML content
</a>
	<div class="highslide-html-content" id="highslide-html">
		<div class="highslide-header">
		<ul>
		<li class="highslide-move"><a href="#" onclick="return false">Move</a></li>
		<li class="highslide-close"><a href="#" onclick="return hs.close(this)">Close</a></li>
		</ul>
		</div>
		<div class="highslide-body">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
		</div>
		<div class="highslide-footer">
			<div>
			<span class="highslide-resize" title="Resize">
			<span></span>
			</span>
			</div>
		</div>
	</div>
</div>

Ajax content

AJAX requesting the body of a HTML page, Click here.
AJAX requesting a specific id in an external HTML page, intro, div3.

<div>
AJAX requesting the body of a HTML page,
<a href="../../public/test/ajax.htm" onclick="return hs.htmlExpand(this, { objectType: 'ajax', preserveContent: true} )">Click here</a>.<br/>
AJAX requesting a specific id in an external HTML page, 
<a href="../../public/test/ajax.htm#intro" onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )">intro</a>, 
<a href="../../public/test/ajax.htm#div3" onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )">div3</a>.
</div>

Iframe content

Content in iframe

<div>
<a href="http://google.fr" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 640, height:480, align: 'center' } )" >Content in iframe</a>
</div>

Flash content

Display flash

<div><script type="text/javascript">
	// <![CDATA[		
	// Initiate the SWFObject. See http://blog.deconcept.com/swfobject/ for full documentation.
	var so = new SWFObject("http://frog.office-web.net/public/test/Flash.swf", "my-flash", "300", "250", "7", "#FFFFFF");
	so.addParam("wmode", "transparent");
	// ]]>
</script>
<a href="http://frog.office-web.net/public/test/Flash.swf" onclick="return hs.htmlExpand(this, { swfObject: so } )" class="highslide">Display flash</a>
</div>

Insert Youtube

Youtube

<div>
<a class="Highslide" href="http://www.youtube.com/v/D977uOHVxYA" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 425, height:380, align: 'center' } )">Youtube</a>
</div>

Code ImageFlow HighSlide

Cette portion de code permet de générer les images avec reflet de manière automatisée
Les images sont dans le dossier /public/img/ où est installé Frog

<div id="ifhs">
	<div id="imageflow">
		<div id="loading">
			<b>Loading images</b><br/>
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/loading.gif" width="208" height="13" alt="loading" />
		</div>
		<div id="images">
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/0.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/0.jpg" alt="&lt;a href=&quot;http://www.photo-libre.fr&quot;&gt;Photos Libres&lt;/a&gt;" />		<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/1.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/1.jpg" alt="Photos Libres" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/2.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/2.jpg" alt="www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/3.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/3.jpg" alt="http://www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/4.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/4.jpg" alt="&lt;a href=&quot;http://www.photo-libre.fr&quot;&gt;Photos Libres&lt;/a&gt;" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/5.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/5.jpg" alt="Photos Libres" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/6.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/6.jpg" alt="www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/7.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/7.jpg" alt="http://www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/8.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/8.jpg" alt="&lt;a href=&quot;http://www.photo-libre.fr&quot;&gt;Photos Libres&lt;/a&gt;" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/9.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/9.jpg" alt="Photos Libres" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/10.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/10.jpg" alt="www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/96.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/96.jpg" alt="http://www.photo-libre.fr" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/97.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/97.jpg" alt="&lt;a href=&quot;http://www.photo-libre.fr&quot;&gt;Photos Libres&lt;/a&gt;" />
			<img src="<?php echo URL_PUBLIC; ?>frog/plugins/ifhs/reflect.php?img=../../../public/images/ifhs/98.jpg" longdesc="<?php echo URL_PUBLIC; ?>public/images/ifhs/98.jpg" alt="Photos Libres" />
		</div>
		<div id="captions"></div>
		<div id="scrollbar">
			<div id="slider"></div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>