showcase – slideshow plugin per jQuery

Showcase è un plugin per jQuery che consente di costruire in maniera semplicissima un moderno slideshow per un set di immagini, consentendo un’ampia personalizzazione .
Edit 02/02/2010: versione 2.0! Tutto nuovo, date un’occhiata alla documentazione.
Edit 27/07/2009: rilasciata la versione 1.0, che implementa la creazione asincrona del set di immagini.
La versione attuale (0.5) si trova ancora in fase di beta, ogni segnalazione di errori o suggerimenti d’implementazione è ben accetta.
Come funziona
Edit 27/07/2009: Vedere le note di rilascio della versione 1.0.
Allo stato attuale il plugin richiede la presenza di un div contenente una serie di tag anchor contenenti a loro volta le immagini che si intende visualizzare. L’attributo alt dell’immagine, poi, viene utilizzato per visualizzare una descrizione dell’immagine.
Ipotizzando la presenza di un div con id showCase1, il metodo per attivare lo showcase è molto semplicemente:
$("#showCase1").showcase();
Nel caso si voglia personalizzare l’aspetto dello showcase sono previsti numerosi parametri (per una descrizione completa consultare la pagina ufficiale del plugin).
Se ad esempio volessimo utilizzare un effetto di slide verticale e numerare i pulsanti di navigazione:
$("#showCase1").showcase({
animation: { type: "vertical-slider" },
navigator: { showNumber: true }
});
Ancora, vogliamo che i pulsanti di navigazione compaiano nell’altro angolo dell’immagine, e che siano disposti verticalmente:
$("#showCase1").showcase({
animation: { type: "vertical-slider" },
navigator: { showNumber: true,
position: "top-left",
orientation: "vertical" }
});
Visualiziamo la miniatura delle immagini nei pulsanti di navigazione:
$("#showCase1").showcase({
animation: { type: "vertical-slider" },
navigator: { showNumber: true,
position: "top-left",
showMiniature: true,
orientation: "vertical",
item: { width: "64px", height: "48px" } }
});
Problemi noti
Il plugin si comporta correttamente con Firefox 3.0.x, Opera, Safari e Chrome, ma con IE6/IE7 si verificano (in maniera casuale, a quanto pare) dei problemi nel caricamento delle informazioni di dimesione delle immagini. Una possibile soluzione sarebbe quella di scolpire larghezza/altezza dello showcase in fase d’istanziazione, prevedendo un paio di parametri in più. Ma ciò non mi convince granchè.
Edit 26/05/2009:
Nella versione 0.5 il problema della lettura delle dimensioni dell’immagine sembra definitivamente risolto.

plugin page
livedemo








[...] Pour voir les démonstrations c’est ici, pour télécharger le plugin c’est ici et la page officielle est ici. [...]
Super crossfade gallery, thankyou for making : )
And thank you for your comment!
It’s the best slideshow I’ve come across, but the way all images are simultaneously displayed at the start kills it for me.
Thank you!
You’re right, it’s not so beautiful, I’d to implement a system to load asynchronously each image.
Stay tuned, in the next release it’ll be much better.
Hey,i have some problems with your showcase.
are there have any css file for showcase.
and it need jQuery.js ; showcase.js file and what?
You only need jquery.1.3.2.js and jquery.showcase.js (latest version). Can you specify your problem? And what is the browser?
I cant get it to work either.
The gallery simply wont show up.
jquery.1.3.2.js and jquery.showcase.js already there! whats missing?!
here is the site:
http://www.bangfestival.net/teste/sort/sort_pxg_work.html
I’ve looked at your code, I think the problem is that you must execute the showcase function on document.ready:
$(function() {
$(“#showcase2″).showcase ….
});
I’m not able to get it to work either. I’ve even copied your html to try and find the problem. Any help would be appreciated.
http://www.gravitation.com/recoding.html
Thanks
I think you’ve to remove the two lines of syntax hilighter, if you don’t have it on your page:
dp.SyntaxHighlighter.ClipboardSwf = ‘/js/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
simply comment them, it must works.
Hi, is there a way to reference one of the images externally and link to it, eg put in a href to go directly to image #2 in the slideshow?
Many thanks
Neil
Sorry, but actually there’s no method to access directly a slide of the slideshow, but it may be an interesting new features…
is there a way to shut off the title bar ?
Thanks for this plugin. I think a nice option might be to have separate autoHide options for the title bar and navigator, but it is extremely well done and useful as is also. Thanks again!
Hi,
showcase looks very good!
is there a possibility to add a link to text in sub-bar like:
“Nice image, read more about …”
or as html:
“Nice image, read more about…
the link could be the same as an pictures
regards, kurt
@casey: not by now, but I’ll add this feature in the next release. Thanks for the suggestion!
@Justin: I think it will be possible, always in the next release : ) . Thanks for your feedback!
@Mike: great idea, I think there will be no problem to implement it. Stay tuned for the next version!
How do i make a website open in a blank page?
You’re right, actually there’s no way.
In the next release I can add a property “target” on the items of “images” parameter, something like:
{ images: [{ url: "images/showcase_the_drow_1.jpg",
description: "Great sunset from the-drow",
link: "#",
target: "_blank" }] }
I really don’t know why I missed it :l
I can not get it to work, I wish there were better instructions. Where to put what (head, body etc).
thanks
You need to execute the init function $(“#yourDiv”).showcase({ … }) into your dom ready function, like any other jquery plugin:
$(function() {
$(“#yourDiv”).showcase({ … options … });
});
and I suggest you to put it into the <head> tag.
But what’s exactly the problem you got?
Hi,
I came up with my own hack to make links open in a new browser window.
Replace line 55 (line beginning with “var $link = $…..”) with this code:
var $link = $(““).attr({href: opt.images[i].link || “#”, target: “_blank”});
Regards,
Tyronne
Yes, it’s the easiest way to solve the problem at the time.
However I’ve just finished to write the version 2.0, and you’ll be able to define the target of each image direcly in the array “images”, plus a lot of new parameters and a complete restyling of the code.
I’m writing now the documentation and building up the new demo pages, so stay tuned for the new version, I think it will be out in a few days.
And many thanks for your attention on this plugin!
Eros.
It’d be very useful a download package containing sources and small demos!
You are right, I’m just rebuilding the demo section according to the new version (2.0). If only I have a minute of time…
[...] This post was mentioned on Twitter by Umut Muhaddisoglu, Rico Landman. Rico Landman said: RT: @umutm: showcase – a cool jQuery slideshow (in Italian) – http://bit.ly/70GFPb #jquery [...]
Thankyou for making this plugin available. Implemented it succesfully. But, is there any way to not show the description field when hovering over the image? I don’t have descriptions so when I hover the images is displays a square without any text. Hope you can help me.
Yours
This option will be included in the 2.0 version, on wich I’m working on.
By now you can use a little trick, setting titleBar height to 0px, or opacity to 0.
$(“selector”).showcase({ … other options … titleBar: { css: { height: “0px”, opacity: “0″ }}});
I think it will works.
Dear Eros;
Thanks for this great plugin and for the new version!
I wanted to add this to my websites homepage; but I couldn’t make it work unfortunately. The images are loading one under the other only, the application doesn’t work.
I know that you’ve added a documentation also; but could you pls explain for a newbie, I make something wrong but I don’t know what.
1. I’ve download and save the js. file to my theme’s “…/library/scripts” folder.
2. I’ve add the script line for it, to “header.php” after the other script type lines.(inside the head tags)
<script type="text/javascript" src="/library/scripts/jquery.showcase.2.0.js”>
(I had the jquery also:)
<script type="text/javascript" src="/library/scripts/jquery-1.3.2.min.js”>
3. I wanted to add the “showcase right” and because of that I’ve added the style code also in header.php :
$(document).ready(function(){
$(“#showcase_right”).showcase({
animation: { type: “fade” },
titleBar: { autoHide: false },
navigator: { autoHide: true }
});
4.I’ve added this code to my home pages content:
So; that’s all; could you pls show me a way; how can I make your plugin work?
Thanks a lot;
uhm… some of your code has been blocked by wordpress…
By the way, I’ll resume the important steps:
1. include jquery .js file BEFORE the showcase
2. make sure you have a div with the correct id (in this case “showcase_right”)
3. if you want to use the old way of image loading (by html anchor tags + img) make sure there’s no errors on closing tags
As I can see, you’ve followed the second example in the “demo 2″ page, maybe the showcase js file is not properly included in the page…. are you sure you’ve closed properly the script tag?
It must be closed like:
<script …. ></script>
To help you I need a little more information, if you’re using firefox watch into the javascript console (ctrl+shift+j) and tell me what error it shown.
Thank you for your help Eros;
Unfortunately I’m not using firefox; I’m using ie8.
I’ve followed all the steps; and still couldn’t find what’s wrong :(
1.yes, jquery.js script is before the showcase.
2.my div is
3. it seems no problem with the images urls (I made “copy and paste ” the uploaded images url.) anyway the images are loading on the page , but one under the other image..
4. all the script tags seem closed right.
I’m wondering , if am I doing something wrong by adding the style codes on header.php. ?
Hi, again ; finally I’ve got something ; it was a “}” problem, it seems; and now the plugin works:)
But with a small problem, that I’ve couldn’t solve.
I want to ask it ; maybe these questions can help other people also, who want to use this plugin in the future:
* The images are loading one under the other image for a few seconds; and then to animation starts working.
Is there any code that I can add to prevent this delay?
* I’ve just noticed that the page is loading with some error. The error message is:
Message: ‘find(…).0.complete’, is null or not an object.
Line: 99
Character: 9
Code: 0
URI: http://localhost/wordpress/wp-content/themes/shapeshifter/library/scripts/jquery.showcase.2.0.js
* and a few questions about customizing;
I know that I have to add “showMiniature: true ” to add miniature images in navigation menu; but how can I set the sizes of these miniature image boxes?
* and how can I edit the font style and size in the title bar? I ‘ve added “fontStyle: “normal” instead of italic; but nothing has changed..
Thanks in advance ;
Best;
I’m happy to know now it works!
For your other questions:
1. This happens because you’re using the “old way” of imagelist, in the other demos you can see that the images is setted by a javascript array passed to the showcase. Is the better way. Anyway I think that you can try (always supposing the “demo 2″):
<div id=”showcase_right” style=”overflow:hidden;width:450px;height:266px;”><a> …etc… </a></div>
where “width:450px;height:266px;” are the sizes of your images.
2. Uhm… I’m not able to replicate this issue on my demo pages… I’ve to investigate better…
3. Yes, using $(“#yourDiv”).showcase({ navigator: { item: { css: { width: “something px”, height: “something px” } } } })
4. You have to use $(“#yourDiv”).showcase({ titleBar: { css: { fontStyle: “normal” } } })
Let me know if all is ok!
Hi, eros;
Thank you; you were right; I give up to use “the old way” of imagelist and order the images as on your demo description in header.php.
Now there is no problem with the loading of the page :)
But I couldn’t fix the navigation box sizes and the fontstyle on title bar. I don’t know what I made wrong; I made:
(“#showcase_right”).showcase({
navigator: { autoHide: true , showMiniature: true ,
item: {
css: { height:”15px”, width:”15px” }
} },
titleBar: { autoHide: true , css: { fontStyle: “normal” } } })
But it doesn’t work; when I make the code like this the application doesn’t load on my page, do you have any idea?
Thanks,
I’ve just tried your code, I think the problem is on double quotes (what kind of keyboard you’re using? :) ), try this code, using the single quote for the attribute’s value:
$(‘#showcase_right’).showcase({
navigator: { autoHide: true , showMiniature: true ,
item: { css: { height:’15px’, width:’15px’ } }
},
titleBar: { autoHide: true , css: { fontStyle: ‘normal’ } }
});
I’m sure this will works, I’m running it on Aptana ;)
Thanks for the excellent plugin!
Is there any way to use in image description a html code, and is there a possibility to use a special small images as navigation buttons?
Thnks to you!
For the first question: yes, I’ve tryed to use some basic html tags, like small and br, and it works without problems.
For the second: if you want to use a miniature as image, there’s a property to do that : { navigator: { showMiniature: true }}
However you can use a background-image to stylize your navigator item, working with the properties { navigator: { item: { css: { …. } } } } or { navigator: { item: { cssClass: “…” } } }.
I know it’s not a well documented features, I hope to have some time to build up a little demo to show this.
Hi Eros;
Thanks for the help with the code; I could make it work somehow , after several trials :) (but with double quotes?)
So, could you find the reason of the error message on js.file?
I’ve still that message while page’s loading:
—–
Message: ‘find(…).0.complete’, is null or not an object.
jquery.showcase.2.0.js
Line: 99
Character: 9
Code: 0
URI: http://localhost/wordpress/wp-content/themes/shapeshifter/library/scripts/jquery.showcase.2.0.js
——-
I guess that this is something about this part of the script:
// Check loading state of #1 image
if ($container.find(“img:first”)[0].complete) {
$.fn.showcase.start($container, opt);
}
But I don’t know, how to fix it…
Thanks;
I’m not able to replicate your issue… I’m trying with IE7 and IE8, with image listed as json and as tags… nothing…
If you want, you can send on my mail the sections of code you’re using (html and js), maybe there’s some other problems….
Lo siento por mi español, estoy utilizando un traductor.
Estoy tratando de poner múltiples (3) casos escaparate en la misma página. Al hacer clic en los navegadores funcionan bien para los tres, pero cuando activo la pausa / go funciones sólo se ha iniciado el escaparate pasado, no importa que se “va” i haga clic en el botón. Estoy seguro de que tengo los tres diferentes ID y dar una vuelta para cada función. ¿Alguna idea?
Oops. Intenzione di fare questo in italiano per voi.
Sto cercando di mettere più (3) le istanze vetrina sulla stessa pagina. Cliccando sul navigatori buon lavoro per tutti e tre, ma quando ad attivare la pausa / go funziona solo la vetrina scorso è iniziato, non importa quale “andare”, fai clic sul pulsante I. Sono sicuro che ho tutte e tre le diverse id e hanno una funzione di andare per ciascuno. Tutte le idee?
Hello,
How can I see just the center of the picture when I resize the showcase div?
It’s possible?
Thanks
I’m sorry, but by now no, there’s no way… I hope to make some changes on the plugin in a near future, but I don’t know if this will be implemented. This is intended as a pure image plugin.
Medicamentspot.com International Legal RX Medications. Special Internet Prices (up to 40% off average US price). NO PRIOR PRESCRIPTION REQUIRED!…