Ideas for new custom show?
rloaderro
that you would like to see? A new custom show? I'd like to bundle
together a new download with the latest version of Mootools so if
anyone would like to see anything new pls let me know now!
PS - You can always find the latest version in the repo:
http://code.google.com/p/slideshow/source/browse/#svn/trunk/mootools
Daiv Mowbray
Hello,
I had thought on various occasions that it would be good
to put together new transition files, expand upon : push, fold, etc.
for example;
zoom in,
zoom out,
oversize pop
stretch out in
flip
etc.
On May 23, 2009, at 11:44 PM, rloaderro wrote:
> Anyone have any ideas for a new Slideshow extension?
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Ron Finley
webmaster
I could not figure out how or wheher the images can be read directly
from the directory.
Anyone can help me on that, showing me an example on how to do it?
Thanks in advance
Gino
Daiv Mowbray
You don't have to hard code the image list into the array DATA.
You could use php to read your folder contents then write the data
array dynamically.
Also you can set the data to null,
(this.el, null,{ your options...
then hard code the html, or write the html dynamically with php:
<div id='gallery" class='slideshow "><div class="slideshow-images">
<a href="link" rel="rel" class="class" title="title" >
<a href="link" rel="rel" class="class" title="title" ><img id="id"
src="image.jpg" alt="alt" width="200" height="200" style="visibility:
hidden; opacity: 0;" /></a>
<a href="link" rel="rel" class="class" title="title" ><img id="id"
src="image.jpg" alt="alt" width="200" height="200" style="visibility:
hidden; opacity: 0;" /></a></a>
<a href="link" rel="rel" class="class" title="title" ><img id="id"
src="image.jpg" alt="alt" width="200" height="200" style="visibility:
hidden; opacity: 0;" /></a>
<a href="link" rel="rel" class="class" title="title" ><img id="id"
src="image.jpg" alt="alt" width="200" height="200" style="visibility:
hidden; opacity: 0;" /></a>
</div>
<div class='slideshow-captions'></div>
<div class='slideshow-loader'></div>
<div class="slideshow-controller" style="visibility: hidden; opacity:
0;">
<ul>
<li class="first"><a></a></li>
<li class="prev"><a></a></li>
<li class="pause play"><a></a></li>
<li class="next"><a></a></li>
<li class="last"><a></a></li>
</ul>
</div>
<div class="slideshow-thumbnails"><ul>
<li><a href="#" title="showThumb">
<img src="image_thumb.jpg" alt="showThum\" width="50" height="50" /></
a></li>
<li><a href="#" title="showThumb">
<img src="image_thumb.jpg" alt="showThum\" width="50" height="50" /></
a></li>
<li><a href="#" title="showThumb">
<img src="image_thumb.jpg" alt="showThum\" width="50" height="50" /></
a></li><li><a href="#" title="showThumb">
<img src="image_thumb.jpg" alt="showThum\" width="50" height="50" /></
a></li><li><a href="#" title="showThumb">
<img src="image_thumb.jpg" alt="showThum\" width="50" height="50" /></
a></li>
</div>
On May 25, 2009, at 7:35 AM, webmaster wrote:
> Anyone can help me on that, showing me an example on how to do it?
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Daiv Mowbray
Hello Ron,
Thank you so much, for the sun glasses
they arrived recently to Ontario Canada.
My partner showed them to me on skype.
I'll be back there to wear them myself soon enough.
Great application of slideshow2 at the Oakley site!
Congratulations.
As for listing on flash sites,
That's probably a good idea, except there is no flash here.
Just JS, so listing on js sites would also work.
Aeron is getting ready to launch a new version with some updates.
Also, I think "Serious developers " know enough to have found
Slideshow2.
More than 50,000 downloads...
On May 25, 2009, at 5:15 AM, Ron Finley wrote:
> Why don't you guys (or Aeron) offer your slide show on Flashden.net?
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Maia Good
I don't really have a new slideshow extension idea, but... I do have a
suggestion. The slideshow uses a controller with several files, and
also several loader files. For the sake of fewer http requests for
files, I think it would be better to combine all these. Don't know if
you agree with it, but... I'm including below the CSS for the
controller with one file only, and the file with all the images
together. I didn't do anything to the loader because the names of the
files are in the javascript and I didn't want to touch that.
Thanks one more time for your wonderful code.
Maia
---------------
.slideshow-controller {
background-image: url(slideshowControllerSprite.png);
background-repeat: no-repeat;
background-position: -21px -21px;
width: 238px;
height: 42px;
left: 50%;
margin: -21px 0 0 -119px;
overflow: hidden;
position: absolute;
top: 50%;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 18px;
overflow: hidden;
position: absolute;
top: 12px;
}
.slideshow-controller a.active {
background-position: 0 18px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
background-image: url(slideshowControllerSprite.png);
background-position: -21px -105px;
background-repeat: no-repeat;
width: 19px;
height: 18px;
left: 33px;
}
.slideshow-controller li.last a {
background: url(slideshowControllerSprite.png);
background-position: -21px -183px;
background-repeat: no-repeat;
width: 19px;
height: 18px;
left: 186px;
}
.slideshow-controller li.next a {
background-image: url(slideshowControllerSprite.png);
background-position: -21px -261px;
background-repeat: no-repeat;
width: 28px;
height: 18px;
left: 145px;
}
.slideshow-controller li.pause a {
background-image: url(slideshowControllerSprite.png);
background-position: -21px -339px;
background-repeat: no-repeat;
width: 20px;
height: 18px;
left: 109px;
}
.slideshow-controller li.play a {
background-image: url(slideshowControllerSprite.png);
background-position: -21px -417px;
background-repeat: no-repeat;
width: 20px;
height: 18px;
}
.slideshow-controller li.prev a {
background-image: url(slideshowControllerSprite.png);
background-position: -21px -495px;
background-repeat: no-repeat;
width: 28px;
height: 18px;
left: 65px;
Daiv Mowbray
Hello Maia,
Personally I think that's a great idea.
I often use the same system in other projects.
Not only makes for fewer http requests,
but also easier to edit one file rather than many.
The loading files is different, since Aeron saw best to use png
for the quality of the transparency, rather than an amimated gif.
Although this makes it very laborious to edit.
Good of you to include the css.
On May 25, 2009, at 12:10 PM, Maia Good wrote:
> The slideshow uses a controller with several files, and
> also several loader files. For the sake of fewer http requests for
> files, I think it would be better to combine all these. Don't know if
> you agree with it, but... I'm including below the CS
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
CD Smalley
http://www.javascriptkit.com/javatutors/externalphp2.shtml
Aeron Glemann
slideshow and css transitions:
On Sun, May 24, 2009 at 4:33 PM, Daiv Mowbray <daiv.m...@gmail.com> wrote:
> for example;
> zoom in,
> zoom out,
> oversize pop
> stretch out in
Most of these seem as though they are just transitions with width / height.
> flip
This would probably require canvas. Maybe something really fancy with
canvas could be the next new thing?
Ron Finley
RE:As for listing on flash sites,
> That's probably a good idea, except there is no flash here.
> Just JS, so listing on js sites would also work.
alternative to to Flash which is often over-kill and over-used for
simpler things, like roll-overs and slide shows.
Do you speak Catalan?
RF
]
Aeron Glemann
I am more-or-less fluent in latin american spanish ;)
y'r pal -Aeron
On Mon, May 25, 2009 at 9:09 AM, Ron Finley <r...@ronfinleystudio.com> wrote:
> Do you speak Catalan?
Daiv Mowbray
Si yo pot parlar en catalá
y en español
but not russian.
On May 25, 2009, at 5:09 PM, Ron Finley wrote:
> Do you speak Catalan?
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Daiv Mowbray
Flashden.net is for selling scripts.
slideshow2 is opensource.
On May 25, 2009, at 5:09 PM, Ron Finley wrote:
> The idea is that the mt slide show is a great (and necessary?)
> alternative to to Flash which is often over-kill and over-used for
> simpler things, like roll-overs and slide shows.
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Daiv Mowbray
On May 25, 2009, at 3:28 PM, Aeron Glemann wrote:
>> for example;
>> zoom in,
>> zoom out,
>> oversize pop
>> stretch out in
>
> Most of these seem as though they are just transitions with width /
> height.
>
Zoom in and zoom out could be done with width/ height, but
pop and stretch require a 3rd stage in the transition.
so perhaps an interesting option is to use 2 transitions per image:
start-stage to mid-stage to final stage.
This way we can use css for each of the three stages.
This would be a pop stretch:
.stage-one{ width: 20%} (time: 0.8)
.stage-two{width: 120%} (time: 0.3)
.stage-three{width: 100%}
>> flip
>
> This would probably require canvas. Maybe something really fancy with
> canvas could be the next new thing?
If canvas is introduced, we could do spin / flip / squeeze etc.
Daiv Mowbray
Hello Aeron, list.
It has been asked in the past.
And I've wonder how to:
have a different transition for each image,
I've just been playing around with some css transitions (great fun)
And I wonder, if it would make sense to tie different images to
different css classes?
for example, the css:
.slideshow-images-prev{}
.slideshow-images-next{}
.slideshow-images-prev-zoom{}
.slideshow-images-next-zoom{}
.slideshow-images-prev-slideup{}
.slideshow-images-next-slideup{}
.slideshow-images-prev-slidedown{}
.slideshow-images-next-slidedown{}
then in the data list:
var data = {
'1.jpg': { caption: 'onecaption', transclass: 'zoom' },
'2.jpg': { caption: 'twocaption', transclass: 'default' },
'3.jpg': { caption: 'threeecaption', transclass: 'slideup' },
'4.jpg': { caption: 'fourcaption', transclass: 'slidedown' },
Then the slideshow2.js could modify the prev / next starting class per
image to append the transclass.
Just a thought.
On May 23, 2009, at 11:44 PM, rloaderro wrote:
> Anyone have any ideas for a new Slideshow extension?
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
Aeron Glemann
Daiv Mowbray
Great,
I think that would put slideshow2 into it's own league.
A per slide transition doesn't exist in any script out there.
Not even the flash scripts do it.
On May 26, 2009, at 11:53 PM, Aeron Glemann wrote:
> That's a good one! I like it....cause it's not too hard ;)
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========
webmaster
a javascript array out of the images contained in a folder. I have
tried, but I could not manage. Any of you can give me a hint on how to
do?
/// Script getimages.php
<?
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image
extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'data['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var data=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file
names
?>
// Slideshow/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slideshow 2!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/
)" />
<link rel="stylesheet" type="text/css" href="css/slideshow.css"
media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'Volcano Asención in Ometepe,
Nicaragua.' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' },
};
var myShow = new Slideshow('show', data, {controller: true,
height: 300, hu: '.', thumbnails: true, width: 400});
});
//]]>
</script>
</head>
<body>
<div id="show" class="slideshow">
<img src="images/1.jpg" alt="Volcano Asención in Ometepe,
Nicaragua." />
</div>
</body>
</html>
webmaster
Daiv Mowbray
On Jun 15, 2009, at 7:51 AM, webmaster wrote:
> I would like to integrate this script (getimages.php), which generates
> a javascript array out of the images contained in a folder. I have
> tried, but I could not manage. Any of you can give me a hint on how to
> do?
Try this.
<script src="getfolder.php?
folder=yourfolder&linkpath=yourlinkpath&min_width=yourminwidth"></
script>
<?php
// get the folder name
$folder = $_GET['folder'];
// get the min_width for the images
$min_width = $_GET['min_width'];
// get the path to link the image
$linkpath = $_GET['linkpath'];
Header("content-type: application/x-javascript");
//This function gets the file names of all images in the current
directory
//and ouputs them as a JavaScript array
function returnimages($dirname) {
global $folder, $min_width, $linkpath;
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image
extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) { // if folder is found
while(false !== ($file = readdir($handle))){ // loop through
the images
if(eregi($pattern, $file)){ //if this file is a valid image
$path_file = $folder.'/'.$file;
$link_file = $linkpath.'/'.$file;
$size = getimagesize($path_file); // lets get the image size
$width = $size[0];
if($width > $min_width){ // if this image is larger
than min_width
$caption = substr($file, 0, -4); // make a caption
from the image name
$file = "'".$file ."': { caption: '".$caption."',
href: '".$link_file."'}";
array_push($files, $file);
$curimage++;
}
}
}
$files = join(", ", $files); // seperate the file list with
commas
echo $files;
closedir($handle); // close the folder
}
return;
}
echo 'var showdata={'; // write the javascript image list
returnimages($folder);//Output the image file names
echo '}';
?>
Nelly
First of all, thanks for creating Slideshow, I've used it a couple of
times and it's very easy to use and customize.
I'd love to see a way to collapse/expand the caption, similar to the
ads in YouTube videos. I have an idea of what to do with the CSS (I'd
add an absolutely positioned link to create the toggle button, which
should peek into the photo area when the caption is closed). I'll see
if I can implement this in Javascript, but I'd like to see this
function in the official release.
Regards,
Nelly
sol2009
Firstly, thanks for a fantastic script - it's full of wonders!
suggestion summary:
1) better installation instructions
2) example strings (php) of how to extract images dynamically
RE 1) - it took me a while to figure out where everything went and
what I needed. A simple 1 page installation document would be very
helpful, i'm sure.
RE 2) I would love some help with integrating this into oscommerce -
so that it can pull the images dynamically, according to the category
specified.... I know it's kinda outside the scope of this project, but
if anyone here wants to help me (or if anyone here has already got
that happening) I'd love to hear back from ya.
Cheers
Sol
Aeron Glemann
Definitely something we're working on!
Hannes Ledl : Internetagentur - LEDL & PARTNER
Hello Sol,
following 2) we
hade similar Problems to get the show customizable.
So what we have done is as follows.
_ we decided to keep so called
‘source folders’ on the webserver. All the pics are a kind of theme relevant
folders.
_ we made a front-end
(ajax based) an
read all the ‘source – folders’
_ in the front-end you we are able to define new (we call them) ‘profile’ an drag-drop
the pictures from the source folder there.
_ saving this – will write an xml file with all the information’s (folder – pic name …)
_ using this for diff. galleries
-> we have an .php script reading these .xml files an put all
the
necessary information together.
_ so in all the pages we use the slideshow we only call the script
e.g. scriptname.php?profile=001-FR
where profile = the .xml file and the
‘F’ parameter tells the script to return
a ‘flash’ (slideshow without
thumbnail) the ‘R’ parameter tells the script to return the pics
randomized
(not in order) we also made the 2nd parameter as ‘L’ =
linear
calling the script with –GL (or ‘GR’)
will return all the information to use this for a
gallery (with thumbnails,
linear or randomized)
.. this may sound complicated, but if you do not have to make any kind of font-end and you are able to work with some simple config files (.txt or .xml) the deal is done in a view hours.
Hope this helps some to get your on solution
Kind regards
Hannes Ledl
Hannes Ledl
LEDL &
PARTNER
A- 9220 Velden am Wörthersee
Villacherstrasse
74
fon +43 4274 52210-11
mob +43 676 522 10 11
http://www.ledl.at
hanne...@ledl.at
Von: mootools-...@googlegroups.com [mailto:mootools-...@googlegroups.com] Im Auftrag von Aeron Glemann
Gesendet: Donnerstag, 09. Juli 2009 00:46
An: mootools-...@googlegroups.com
Betreff: Re: Ideas for new custom show?
sol2009
Hey Aeron, thanks for the reply.
Further to my previous email, I decided to go ahead and make an
OSCommerce "Contribution" based on your package, which I have posted
on the oscommerce contributions page for all to see / use:
http://addons.oscommerce.com/info/6870
I've fully referenced you as the author, and have added all the links
to the FAQ, Wikki and support forums.
I also wrote a simple instructions file, based upon my experience with
your script.
Maybe this could act as a start point for an installation file for
your wonderful script? Your script deserves a wider audience (and you
might get a few more fans! ;-)
@ Hannes Ledl
Thanks for your reply,
I kind of follow what you're talking about, but I have two questions:
1) did you write this specifically with OSC store ?
2) are you willing / able to share some links / the xml files for
this?
Thanks
Sol
Daiv Mowbray
Hello Sol,
This is great , thanx from all the slideshow2 users.
I've just had a look around osCommerce to see how to make a module.
Not much API info at all, but I did find this:
http://addons.oscommerce.com/info/5102
"slideshow of images based on the category the user is looking at"
You could modify it to use the slideshow2 script.
Still requires editing files on your system.
Spread the word, and watch for the next version ;-)
On Jul 12, 2009, at 2:53 AM, sol2009 wrote:
> Hey Aeron, thanks for the reply.
>
> Further to my previous email, I decided to go ahead and make an
> OSCommerce "Contribution" based on your package, which I have posted
> on the oscommerce contributions page for all to see / use:
Sincerely,
Daiv Mowbray
daiv.m...@gmail.com
========