I’m working now a couple of weeks on a new slideshow options, which is based on pure Javascript, so it’s possible to view them as well on a iPad/iPhone and other mobile devices. I estimated that it will take just a couple of hours, but I ran into various challenges. I would like to share some of my problems :
First of all I looked for all the great jQuery Plugins on the market, here you find IMHO the best ones. I thought that I just need to grab one of these slideshow plugins and add this to my code, but I came across a couple of problems to replace the existing flash solution. A flash slideshow solves three issues :
- Any theme related style sheet didn’t affected the flash layout
- It load images step by step
- It can resize mixed image formats ( portrait / landscape )
NextGEN Gallery is a plugin which should nearly handle all kind of themes / layout / formats, if you look into the samples above you find a lot of great designed slideshow, but they will not fit to every theme layout. So I need to pickup a solution which requires a minimum of styling, the rest should be pat of the theme author.
Another point : The most jQuery Slideshow plugins are not designed for loading speed, they parse a hidden div/ul list which contain the images. This is ok for 5-10 images, but not for a gallery which can contain 100+ images. A page load will blow up. So I need to add a AJAX based loading for the images. I study a couple of plugins and decided to use jQuery Cycle, it contains a lot of functions and can handle a AJAX loading of images.
In the second step I’m looking for a reliable solution to resize a image to the wanted size and keep the ratio, also jQuery Cycle has here some problems. WordPress.com introduce a slideshow feature and while I study the solution I recognize that they resize the images on server side, no need to handle this later in the script code. Very good for bandwidth, but I need to cache resized images in this case , otherwise your web hoster and your server cpu usage will blow up.
Currently I load the full images step by step and setup then the wanted container height, I’m still working on a solution to center images. You can watch a first result here :
http://nextgen-gallery.com/playground/jquery-cycle/
Any hints / comments for a better solution are welcome
Hi Alex,
First of all, great job over here. You’re doing great with all these JQuery implementation.
I’m currently trying to use your GalleryView plugin in WordPress but can’t seem to make it work using the shortcode. Can I have some more indepth information on the gallery variable please?
Cheers
Sachin
It would be really great to have the option to activate certain aspects of the slideshow as:
- arrows to navigate
- pause on hover
- image description on/off *
* check this working example:
http://www.ina.org.br/jovens/
PS: I’m finishing updating the pt_BR translation
Will send you soon.
Best regards,
Djio
http://www.DJIO.com.br
Ahh I spotted that on your site as its just what we need for simple non flash slideshow….. loving NextGen Gallery thanks…. Any idea when this Jquery Cycle version might be ready as if not in next few days I better look at something else as client waiting
eek 
Don’t expect it in the next weeks, I will work on other topics before I release the next version
Keep up the great work. I use this on one of my non-profit client’s website and it works a treat. Thanks for the hard work!
i use prophoto blog theme for my photography blog, and its great because it has a simple gallery creator that is flash on a regular computer but a (javascript?) lightbox gallery when viewed on a iphone.
it works really well.
however my other site uses a theme that doesnt have a slideshow included, so i like to use nextgen.
you might want to check out prophoto blog by netrivet to see how they do it.
I have use Cycle too for my portfolio
with image preloading and some jQuery
you can take a look at my code
and take anything you find usefull for you
http://www.studioteknik.com/html/photo-portfolio.php
There’s a ton of stuff out there. I would look to a plugin that:
1) Comes close to what you have with the jwplayer in functionality
2) Has plenty of support and has had active development over an extended period of time
3) Easily configurable
Have you looked at the Galleria plugin? http://devkick.com/lab/galleria/demo_01.htm It seems the closest to me but I don’t know if will solve the resizing/cache problems you mentioned.
Galleria is a nice looking solution, but doesn’t fit to themes, too much CSS markup needed
This is very exciting news! Most of my clients don’t want to use Flash anymore, because mobile devices don’t display it, and it’s tougher to find a flash developer in general. This will truly make NextGen the ultimate gallery plugin for WP.
In the meantime, I’m going to mess around with GalleryView, or implement my own template that uses Coda 2.0 jQuery plugin.
Thank you Alex for your excellent work, and your attention to detail.
I’m looking forward to more developments. It looks like you are making a lot of progress. NextGen is already the best slideshow plugin. This will take it over the top!
Hi Alex,
Got some code examples for your implementation that we could look at?
“-Any theme related style sheet didn’t affected the flash layout
-It load images step by step
-It can resize mixed image formats ( portrait / landscape )”
Really??? Those limit your reasoning to USE Flash???
For the first reason, I am not going to even answer. You gotta be joking.
Second. As opposed to what? Loading it ALL in? You can find a perfect jQuery to suit your needs.
Third. Same thing, you can find/build a jquery to suit your needs. a 400×400 image is always a 400×400 image, using a flash to resize or having it done with jQuery/HTML doesnt mean it makes it different.
I think you are too complacent with flash.
@Anon
Please read the post again, I think you missed the point.. complete ! I never said that flash is the best solution, I said the existing flash slideshow has the mentioned issues already solved.
“You can find a perfect jQuery to suit your needs.” Really ??? Why do you not contribute this easy piece of code ???
As you can see I create a first solution with the cycle plugin, Please send me a sample where I can center all images, independend which theme I use and where I place the slideshow (sidebar, footer, header) . As you know not many people have the ability to change the CSS… and of course cross browser compatible
I’ve looked at JQuery cycle site
I think the image format problem can be solved quite simply – cycle works on the image container – and anything can be in the container, including text. So if you style the image within the container (for instance using max-width and max-height), or centre it for instance, this should work because the “slide” that cycle works on is the container and not the image itself.
I’m looking forward to seeing the next version – NextGen keeps on getting better !
I’m using the jquery GalleryView plugin. How do I change the size of the transparent strip overlay? I can’t seem to find the code line that controls it. I would like to make it thinner (change the height). I’ve tried changing various numbers in css but none of them seem to affect the transparent overlay.
Also, is it possible to make the thumbnail bar wider? I made my main gallery pics smaller (200×250) because my pics are people portraits, but this causes only 1 1/2 thumbnails appear at the bottom of the main pics. I would like the thumbnail bar to contain at least 3 or 4 pics.
Any suggestions?
I found a solution! Was at it for 2 days -_-
To centralize images in the Slideshow (non-flash)
Do this
1) On the left panel of your wordpress, click on Plugins > NextGEN Gallery > Edit
2) Edit nextgen-gallery/js/jquery.cycle.all.min.js (near the bottom on the right side)
3) Do a search for “absolute”. There should be 2 matches. Change them to “relative”. You’re done with the js at this point.
4) Now, head to your wordpress left panel again, go to your nextGen settings, and click on “Style”
5) Add this class in (under ngg-slideshow)
.ngg-slideshow img{
margin:0 auto 0 auto;
position:relative;
}
Should work now! =D Cheers! I did it on the galleries in http://invisiblephotographer.asia/
Cheers!
Hi, Alex.
I don’t if that’s still a question, but resizing (filling) of image to container as well as centering it inside (both vertically or horizontally) is feasible with jQuery. Currently my code reads divs, that is if there is no JS, all images are shown. But previously I had a version which read paths and download images in background. Let me know if I can help.
Cheers,
Denis