I’m not showing these as complete solutions to your problem, but steps along the way. My opinion is that with some hand-coded CSS and a few scripts, you could make the slide show of your dreams. As I said earlier, it wouldn’t be simple or code-free by any stretch of the imagination, but it would do precisely what you want.
Walter
On Oct 26, 2014, at 1:08 PM, Howard Spaeth email@hidden wrote:
I like those but want it to be responsive, as the site built, already is.
I guess an alternate solution is to just have them all thumbnails on the page and just use scriptylightbox and have them get bigger… maybe a slideshow is not possible
What I want it to do is when you click a thumbnail, i want the picture in the middle to show up as the full one… similar to showtime, but through freeway
I saw that, but it was originally still kind of obtuse to me - I wondered, did you mean you want the large image ON all the time, and the thumbnails above it to switch between which one is active?
OR (maybe)
You want just the thumbnails only visible until one is clicked - then a large image pops up covering the entire active screen (AKA Lightbox). “X” then makes it go away in the UI.
Plus -
It is a slideshow - on a timer with some kind of transition, glide, fade etc.
It is flexible/responsive.
If you web search “responsive slideshow” you’ll find tons of them, and the experts here could help you to wedge it into a FW site. It probably won’t be simple though.
You might even be able to export an Exhibeo Showtime gallery as HTML and then drop it into the FW site as markup if the Exhibeo Action isn’t working right with Backdraft. Just a thought.
That’s using CSS and a tiny bit of JavaScript to do the whole thing. If you change the number of thumbnails, you would modify the percentages used in the CSS to match.
If you wanted this to be hands-off, I would probably write some PHP to scan the directory of images, build the thumbnails, and modify the CSS for you in one step, then no matter how many images you put in the folder, the final thing would just work.
View source to see how it works — it’s all done in one file (no externals except for Prototype.js).
Walter
On Oct 26, 2014, at 3:10 PM, Howard Spaeth email@hidden wrote:
HTML did not work great, I guess the way to do is with lightbox
In Safari, open the Preferences, and click Advanced. Make sure that “Show Develop menu” is checked. In the Develop menu, choose Show Web Inspector. That’s what it means to “show source” — you have to look at the HTML and CSS that make the page. It’s not visible in the browser unless you do that.
Walter
On Oct 26, 2014, at 3:55 PM, Howard Spaeth email@hidden wrote:
That is exactly what I want!!
However, I can’t view source, the pictures take it all up… Any way you could email me the file?
Hi Howard,
I’ve an Action based on the Galleria[1] image gallery that sounds like it would do what you are looking for. I currently use it as a direct replacement for Wow Slider although it can do much more.
The Action can be set to be both responsive or a fixed size, can display thumbnails or have them hidden, can transition between images using several effects, can automatically read embedded metadata from the original images to use as file names and captions etc, as well as supporting a lightbox view when the large image is clicked on.
Although I created it for a project I’m thinking about documenting and selling the Action so if you’re interested get in touch and I’ll send you an email when I get it online.
Regards,
Tim.
I’ve been doing this for nearly 20 years. I just wrote it off the top of my head. I used Prototype.js, which is a toolkit for writing object-oriented JavaScript, which is why there isn’t a lot of “drama” in the code, like document.getElementById(‘thumbnails’) – instead you just see $(’thumbnails') instead.
Here’s a Gist of the source code, so you can see it in its color-coded glory:
The images are from the “placeholder” service http://placekitten.com, and I just put in some random sizes until I got a few I liked. The URL is simply the site base url, followed by a slash and a number (for a square image) or another slash and another number for a rectangle. If I were doing this with some known photos, this basic approach is how I would take it for a start.
If you want to have a dynamic site, where you or your client can upload a bunch of photos to a known folder on the server, and the server will just construct the page around them, then there’s a bit more process needed, this time in PHP or another server-side scripting language. You could read the contents of that folder, filter for only JPG images (for example) and then write out the HTML automatically.
Walter
On Oct 26, 2014, at 4:18 PM, Howard Spaeth email@hidden wrote:
How did you make the image source part? and the javascript? I’ve not built a page like this before, so I may need some help