Awkward Showcase – A jQuery Plugin

Testar disquss

Jag har implementerat denna på en sjat och den fungerar bra i Firefox och IE8. Dock fungerar den inte i IE7! Har ni någon lösning på detta?

/Dan Lundgren

Nu har jag löst det. I objekten har ofta sista property’n ett komma (,) som orsakar felet i IE7. Ta bort dessa så fungerar det.
FEL:

var defaults =
{
width: 700,
height: 470,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
speed: 500,
slide: true,
mousetrace: false,
pauseonover: true,
};

RÄTT:
var defaults =
{
width: 700,
height: 470,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
speed: 500,
slide: true,
mousetrace: false,
pauseonover: true
};

/Dan Lundgren

Tack för att du uppmärksammade detta Dan. Tänkte bara påminna om att det finns några saker som fortfarande inte fungerar som de ska i t.ex. IE7 med v.0.1, men det kommer en fix på dessa under nästa vecka tillsammans med några nya funktioner.

This is fantastic – Thank you!

I’m having some trouble, once the thumbnails rotate, there seems to be some confusion as to where they go when they are selected.

In my example (http://www.prcnoosa.com.au/tour.php), progress through the slides until the the end – this is the 6th slide. Then click on the thumbnail for the 5th slide, and the thumbnails getc mixed up.

Any advice?

Thanks for pointing that out Tim! It was a small bug fix. Download v.0.2.1 and replace the plugin file (jquery.aw-showcase.js) to fix it.

You slider is awesome! One question though. Is it possible to hide the graphical arrows and display textual links next to the dots/number links in the button bar?

Great Plug-in!
Having a small issue though. before the slider loads completely the other images within flash beneath the designated height. For about a second or so. Any way to avoid this?

Brilliant – works a treat! Thank you!

Absolutely great stuff.

I’m attempting to use this now for a timeline gallery, but am running into a problem when I attempt to view this in IE…

http://www.optimaweb.com/MediaCenter/thirty/awkward/good.html

Any help appreciated!

Do you mean a previous and next button? If you do the answer is no, but maybe that is something that should be implemented in the next version. Thx!

We are working on a solution for that. For now you can set the designated height for the showcase in the css-class .showcase-load. This should remove the loading jumps. It’s not a perfect solution but makes it look a lot better.

Which version of IE are you using? It should work in IE 7 & 8.

Awesome plugin.
Here’s something to improve on. I’m not sure if it’s doable or not at the current version but do inform me if it is capable of doing so.

Notice the thumbnails in Demo 3. There are 5 thumbnails in a page, if you want to press the 6th thumbnail, you have to sort of press the arrow button to get into the 6th and 7th thumbnails.

Why not do it in such a way when you press a picture, the thumbnail of the picture will be centered. That way we don’t have to go all the way to flip pages in order to find pictures.

It’s doable and it’s a great idea Maybe a configuration option in the next version.

Very interesting! Used on the page http://interpolnyc.ru/photo.html

I am back with a bug (possibly) report.

I’ve set these settings
auto: true,
interval: 5000,
pauseonover: true,

It basically means that the slideshow will auto switch pages every 5 seconds. If the mouse is on the picture, the slideshow will pause and not switch pages.

Then I tried to hover my mouse in and out of the slideshow. As my mouse is hovered on the picture, the picture paused. As I move it away, it transitions to another picture.

So if you do it in a very quick manner, it transitions depending on the speed your mouse hover and un-hover at the slideshow. Which sort of defeat the purpose of the 5 second interval.

awesome plug-in.

first of all thanks for share it. i have just little one question
How can i directly link with any number of slide with my any anchor tag.

for ie..

i am using five page content slide with that content thumbnails. suppose my fifth slide content is contact page content. now i want to direct link with this slide to my top navigation contact us Link.

How can i do this. please guide me.

thanks

Awesome work!

A problem, however, in IE 8.

I get a short glimpse of a page, then following error, then blank (white) page with IE progress bar being stuck on loading animation.

— error message —

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; OfficeLiveConnector.1.5; OfficeLivePatch.1.3)
Timestamp: Tue, 5 Oct 2010 00:39:50 UTC

Message: Object doesn’t support this property or method
Line: 156
Char: 2
Code: 0
URI: http://www.awkward.se/wp-content/themes/awkward.v.3/js/functions.js

The function that change the content is defined inside the main plug-in function and therefore not accessible outside that functions scope. You need to alter the structure of the plug-in to make this work, which may be a good idea for us to do for the next version.

For now the only thing I can think of is using JavaScript to trigger the event for the button you want clicked in the Button Panel.

Example:
<span onclick="$('#showcase-navigation-button-4').click();">My Link</span>

It is a bug, sort of. But it’s because we haven’t implemented any advanced pause function for the plug-in yet. For the next version we plan on making it possible to enable a visible timer for the Showcase that can be paused and resumed.

Hi, it work great, but when i change it size above 700px of width the thumbnail wrapper do not came back on first time, and display an empty space until you repeat all the sequence again then it turn back to the start
Thanks
Gab

HI,

I am having an issue with the plug-in. When you click the buttons it is not stopping the auto-play as it should. This is in Safari and Firefox on a Mac. Any advice would be great!

Regards,
Rob

It shouldn’t be any problem changing the size of the showcase. Can you show an example of this bug? That would make it easier for us to fix it, thanks!

Bug fixed in latest version.

The problem occurs in IE8.

When I set thumbnails:true, the script times out.

There is a high (30) number of children, but it doesn’t seem to cause a problem at all when thumbnails are disabled.

I’m confused by this… It’s actually throwing an error from the jQuery file…

http://www.optimaweb.com/MediaCenter/thirty/new/

It works 100% in FF, Chrome and Safari, but times out or doesn’t display properly at all in IE8.

Hi,
very beautiful plug-in, but I’m having Gab’s same issue: 486×326 WxH, auto:true, interval: 5000, continuous: true, more than 6 thumbnails, thumbnails_position:’outside-last’, thumbnails_direction: ‘horizontal’, after the last image thumbails disapears even if the carousel continues. With this WxH, the fourth thumb is more than a half hidden; how can we change thumbnail’s dimensions?

It would be great if you could post a link to the page where the script is running. That would make it easier for us to help you. If you want to change You can change the thumbnail’s dimensions in the stylesheet, example below..showcase-thumbnail{ width: 120px; height: 90px;}Make sure to change the following class as well, if necessary:.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail{ …}or.showcase-thumbnail-wrapper-vertical .showcase-thumbnail{ …}

Hi! Thanks for making such an awesome slider! I’m using the brand spankin’ new version released on Oct 12 and I’m running into an interesting issue. When you click the back arrow on the slider the new content slides in completely before the old content has a chance to slide out. It’s like the old div that you were on is set to ease out at a slower rate than things ease in. Is this just me?

Thanks!
-Cody

Hi, I have get the same kind of problem. With 10 Pictures It works very well. If I use 11 or 12 pictures the thumbnails disappears after one circle. In the third circle the thumbs appears again. Example with 11 pictures here: http://www.rainer-koerner.de/peter
The problem does not appear if I use 13 pictures -> http://www.rainer-koerner.de/peter1

I think some kind of ”space” cause the problem.

Tanks
Erka

The latest version (0.2.3) should fix this.

It’s not just you. The plugin is actually designed to transition the slides like that. In version 0.3 we will add a more complex configuration option for transitions.

Yes, it works now!

Thank you very much.
Rainer

Wow. This likes the slider par excellence. One question. Can it handle variable (i.e) percentage widths?

This looks like THE slider par excellence is what I meant below.

The images within a slide can, but not the showcase itself.

The images within a slide can, but not the showcase itself.

Thanks a lot for this versatile awesome plug-in. I am using it in my latest work.

Though I am having trouble in declaring two showcase with different configurations. I am using different IDs. but more than one declaration not working.

Just want to know if there is any work around.

Thans for your reply Joakim. Would it be possible to have a variable (percentage) width for the showcase itself?

Looks really good, but if I were to place the arrows and/or buttons inside the ”showcase” instead of outside of the showcase. Is this doable?

Me again. If you add multiple showcases and have the keybord_keys set to true, then all of the showcases scroll when you use the keybord. Wouldn’t it be better if the keys could be used after you’ve set focus on the current showcase? Just a thought.

That is doable, you can use CSS to position the elements.

Sounds like a future configuration option, thx!

Is there a way to configure the slide to catch, for instance, the li elements of a list instead of div ?

This slider is great. However, it seems like in ”Demo #3″ if you are viewing slide 6 on 7 the left thumbnail navigation arrow ceases to work. Is there a way adjust that?

Yepp, if you change the code on line 69 fromshowcase.children('div').each(function()toshowcase.children('li').each(function()But I would’t recommend it because the plugin will replace the li-elements with div-elements.

Thx! The bug is fixed in the latest version.

I will have a look at that, haven’t tested multiple implementation on the same page.

Then I guess I’ll change my markup Thanks!

Tack själv!

A very pleasing implementation. Would like to see an option for progressive loading via ajax.

On the list for future updates.

I realized this plugin has improved to v0.2.4 since I last installed with the v0.2.1.

Is there a changelog for this and how do you upgrade?

Hey love the slider.
I am currently working on a site where I need 3 sliders on one page. Everything works great except with the horizontal scroll bar.

When I pass the last thumbnail, I can continue to hit the thumbnail arrow/ arrows/ keyboard and scroll deeper into nothing. During this time the number changes as it should, as does the main image. But the thumbnail is not returning to the beginning.

When it hits the last number after being blank for one revolution, the thumbnails show up.

The problem occurs if you duplicate your Demo 3, 3 times (#showcase, #showcase2, #showcase3)

Is there a fix for me?

Thank you,
Phil

I have a question when came the relase version of this product i like it very but
i’m unsure:$ Is in this any problems why is it only a beta ?

Thanks for your great work, I would like to know if there is a way to override the black background behind while the images aren’t loaded?

sorry, didn´t thought about the predefined background color in style.aw-showcase.css, its defined in .showcase-content.

Sorry, can’t think of any fix right now, will try to fix this in the next release!

Just replace the old file with the new one, you can find a changelog at http://plugins.jquery.com/project/awkward-showcase

Not workin with jQ 1.4.4.

Will have a look at that today.

Well, I really can’t figure out how to adds custom next/prev buttons without actually puts my hand into the Awkward Showcase source code. Any hints? TIA.

It should run with 1.4.4. What kind of error do you get?

You can find the button image in the img folder and position the buttons by editing the CSS. No need to make any changes in the plugin source code.

I may be missing something, but does flash content not really work in your jQuery plugins, specifically Awkward Showcase? Flash will load and play when it’s initially loaded, though if you navigate to a new slide and then go back to the flash, it will not play…it’s no longer able to be interacted with. Any experience with this issue?

i figured it out. Great jQuery plugin!

I also like this slider as it has many options in one. next previous, animation effect, add tooltip and the pagination. thumbsup

I installed this plugin for an old site that built by table. It’s not showing in IE7 and leave a black space there. I tried to put in the reset in the CSS file. It affected the entire site’s layout.
Are there any solution for this ?

[...] Featured Item slideshow on homepage (jQuery, Awkward Showcase) [...]

image is shown half in ie7. please let me know if there is any fix

What an amazing script Joakim Strandell, I have been for the last 3 days trying all kinds of JQuery sliders, some very good ones but none quite what I was looking for. I actually started delving into learning JQuery to produce my own slider, something I really didn’t want to do. Then I came across your fantastic script, that included everything I needed and much more.

Thanks for the time and effort in bringing this to the community, its a fantastic slider, maybe the best I have ever seen.

Good Job

and to think it only a beta………………….

I was thinking of using it to create a video gallery but with 30+ videos it would be bad for page load, so i am thinking about how to detour this…loading the embed codes from a xml sheet? or doing it php/mysql maybe some kind of text fetching js trick?
Any sugestions?
Thanks

Currently I am using it for a similar thing, using php/mysql which loads the external flv video files from the flashvars paramater pulled from the database. Using an xml sheet will also be a good solution.

I used this flashvars method here blog.six4rty.ch/tutorials/flash-flashvars-in-as3/

I know there is a way to enable/disable all of the thumbnails. But I am wondering if there is a way to disable specific thumbnails in the lot? When I delete the thumbnail code for a specific div, the page gets all messed up. Any ideas? Thank you!

[...] Demo and Download Awkward Showcase jQuery here [...]

Sorry, no solutions for that right now. Except trying to hide it via CSS.

Great jQuery plugin!

i want 2 use it RTL, pls guide me how to convert it ?

Dude, how did you fix that?? Please share as we’re having the same problem…

I’m having issues with Flash. What happens is if Flash is loaded, when it switches to another slide and then finally back to the Flash slide, the flash is Black and the video is off. How do you fix it?

When a slide is not visible it is removed from the DOM, that is why the video stops playing. Why it doesn’t work when loaded again I don’t now. It may have to do with the way the flash object is loaded. Are you using JavaScript to load it? If you are, that may be the problem.

Hey there! I love this slider, but I’ve been unsuccessful using in conjunction with the awkward lightbox or Fancybox. I’ve basically tried to use the lightbox inside one of the slides and it just opens the image in a new window instead of in a lightbox. But if the same image is outside the slider it works. Any suggestions? Thanks!

Great plugin!

This is working for me on Chrome and IE but not on Firefox… any ideas?

Okay fixed it…

It wouldn’t work using jQuery-1.5, I switched back to the original 1.4.2.min and its all good!

Thanks!

Hi Joakim, This is a great plugin, thanks for all the hard work.

There is a slight problem in FireFox (Mac and PC) when using it with jQ1.4.4.min. On horizontal sliding, when you click the right arrow, the new content doesn’t slide into place but becomes visible instantly behind the new content.

See an example here: http://www.area.rmid.net/showcase-broken.php

Switching back to jQ1.4.2.min cures the problem.

Do you have any objections if I port this plugin to Joomla? What copyright do I have to display bearing in mind that most of your code in the js remains untouched and the Joomla code is a derivative work. I’m more than happy to use the same licence as the original work and attribute the original work to yourselves.

fuzzball

Not at all! As long as you attribute the original jQuery script to Awkward where happy. Plz keep us updated.

how to stop or change width and height during slide

This has become my new favorite plugin, thanks for all the hard work.

I have a few questions. How hard would it be to adapt the thumbnail strip to only move forward one slide, instead of moving the entire width of the visible thumbnails?

On that same note, could you then make the thumbnail strip and infinity loop as well. If you built this functionality, it would make this plugin even more superior than it already is compared to other ones out there.

Best,
csl

Nevermind, I realized there’s a slidex feature, but for some reason, I somehow broke the thumbnails, possibly with my custom css. Whenever I hit the last one, it doesn’t roll back to the first thumb.

You can see what I mean here:
http://www.thesidedoorstudio.com/freshrepublic/edibles/

Any guggestions would be greatly appreciated. Thanks agai!

This is a bug in Firefox. Fixed in the upcoming 1.0 relase.

Hi,

Thanks for this great plugin !
I’ve juste a problem with IE 8. It affirms that the script must be stoped in order not to block the computer.
Is somebody have the same problem ?
Thanks a lot

jquery 1.4.4 right slide effect get error.

Nice slider!
I got a question: How can a pause/play the slider?
I want to show a flash movie in the slider. When the movie comes up, i want to pause the slider, show the movie and then continue the slider.
Thanks in advance

Love this! But how can I use multiple instances on the same page please?

Fixed in next release

Sorry, not possible as it is now.

The current version doesnt support multiple implementations on the same page. Possibly a feature in the upcoming 1.0 release.

I love this plugin – but I’m having some issue with cufon text replacement. http://www.mayamedispa.com.au/home.php The ‘h1′ replaces on the first slide, however all slides from that (inlcuding slide 1 second time round) no longer has the replacement. Any ideas?

Lovely plugin. I’m going to use it to shwocase some of my digital work.

However, I’m sturggling with that arrangement of the content caption. I want to dislay addiotnal information about the work in a container located underneath the slider, i.e. the caption container should be displayed below, not within the content div. I tried switching to relative positioning, but no success. Seems that I am missing a simple point here. Any hints?

Thanks in advance!

Well, the issue I’m facing is that oveflow:hidden is applied to the content container to hide the area used to load the previous/next image or other content above and below, so I obviously want to keep this. However, the problem is that I cannot make the child visible outside of the parent with this setting.

I haven’t found any workarounds or hacks for this yet. Suggestions?

I couldn’t find any fix that worked for me, so I ended up setting overflow of the divs generated by the plugin to ”static” and use fading transitions instead of vslide/hslide. I’d prefer one of the latter effects though, so any solution is highly appreciated.

Cheers

Working flawlessly under jQuery 1.4.4, it was so easy to install !
The CSS file was really clear too.
I use it here http://www.ekipeo.eu/ (but the site is not finished yet)

I have selected this AWKWARD SHOWCASE out of several similar plugins after many tests. It is the one has good features and easy to use.
Thank you very much for your great work!!!

Hi Guys. I think I need to add ”Cufon.refresh(); ” to jquery.aw-showcase.js, so that after each slide is displayed, the cufon script refreshes and converts the text to the appropriate font.

Can anyone advise where I should add this?

I appreciate your help!

Thanks very much! Very useful

Wow, great slider!!! Really, I love it and use it for most of my wordpress projects! Hope, the slider will support the recent jquery lib and also hope it will get some new features like infinite thumbnail scroll…

Great work!!!

This is the best gallery plugin I have tried. When will the multiple instances be out? Is there a work around? I am helping a non profit put up a few galleries on their website, and I’d really like to use your plugin.

Many thanks, brilliant plugin.

me too ! Including IE6 & IE7…………

Hi Love this plugin too….. to fix in IE you have to update jquery-1.5.0.min.js to jquery-1.5.2.min.js found here http://code.jquery.com/jquery-1.5.2.min.js
or link in this script

Hi this seems to only work for IE9

I think you could fix the problem you’re having with dynamic height in Webkit if you put the actual height and width of the image in the html. You could do that easily with php. On pageload Webkit doesn’t know the dimensions of images, while Firefox for instance does. So if you define it in the html the problem is solved. I hope

Thanks, especially for the viewline. I already tried to implement something similar a couple of years ago on my photography portfolio.

Nice job!!!

Can use this plugin in fullscreen?

TKS!!!

Hi!

The Slider is GREAT, but pagination in Viewline doesn’t work properly… When I click 6 it goes to 2, 6 again – it goes to 3… Seems pagination behaves like next/prev buttons

Amazing, thank you for sharing!!

This is an absolutely fantastic script – Thank you SO very much for your work on this! I needed to be able to start the gallery at a particular slide, so I made two additions to the script:

A) Added a new key to the ”defaults” array right after ”viewline : false,”:

start_at : 0

B) Added a new line of code right after ”if(options.mousetrace) { … }”

if(options.start_at > 0){changeContent(options.start_at-1,’next’)}

I can now include start_at : 5 (or any other number) in my list of awShowcase() options, and the gallery will automatically go to that slide upon opening.

If this is useful to other people, maybe you could incorporate it in the next release? Thanks again!

Any idea when the ”- Custom function that runs on content change” will be out.

I wanted to use Awkward showcase with Fancybox to show a youtube video. When a user changes slides and then return to the one with the video link fancybox was not enabled.

My work-around was to add a function at the end of changeContent() to call $(”.fancyYoutube”).click(function ()).

This worked, but it would be better if I could call that function on a ”contentChangedDone” event.

great work, but class=”showcase-tooltips” dont work in IE, any solutions for that one?

 I love this plugin.. Thanks for sharing this ..

 Just beautiful!

First,thanks for sharing this wonderful application. I have put the jquery into my index.html and  used this sentence ”” to show slides in my blog.However, I think there may be some bugs in my code,because I can see that the ”http://honwhy.tk” keeps refreshing.Then, I do not major in computer programming…I am asking for your help sincerely! HERE ARE MY HTML CODE! http://cid-d8a9e06154b32873.office.live.com/self.aspx/CODE/style.css#resId/D8A9E06154B32873!191  AND THE CSS http://cid-d8a9e06154b32873.office.live.com/self.aspx/CODE/style.css#resId/D8A9E06154B32873!192 Hope you have a good day! UTC+8 2011/05/15@01:26 honwhy19@hotmail.com Hope you have a good day! UTC+8 2011/05/15@01:26 honwhy19@hotmail.com

Has anybody figured out a way to start on a random slide?

 Did you ever figure out how to display a random image?

 I’m also having a similar problem. I reduced the size of the thumbnails in the stylesheet, and having the last thumbnail in the group cut off. Here’s my page:  http://www.doorwaytothesun.com/gallery-test/index_v1.html
Also, is there a way to change width of the thumbnail container?

this plugin use in IE Can cause the browser collapse，Suggestions?

Thank you so much for this addition !

The plugin is tested in IE 7 and should work in later versions. The problem may be the implementation, can you post a link?

I’m having an issue with Internet Explorer (noteably IE8 and IE9) as well, possibly due to my implementation of Akward Showcase within a Fancybox IFRAME.

Whenever a right or left arrow is clicked, or a thumbnail is clicked, IE pops up a ”A script on this page is causing Internet Explorer to run slowly” error box – Clicking ”Yes” seems to allow Showcase to proceed to the next image, but the error pops up again once a thumbnail or right/left arrow is clicked. Evidently, this is caused when a script passes a threshold of 5,000,000 statements.

A friend recommended breaking up the change_content() function using setTimeout(), but I haven’t a clue (yet?) as to how to go about this.

Any thoughts? You’re welcome to check out my implementation by going to http://www.selectstone.com/stones/building-stones/sandstones/ and clicking on any one of the galleries.

About the dynamic height problem and Safar (Demo 4). I found out that Demo 4 works if I turn off the Safari Adblock extension. Just a tip if you are looking for bugs. 
http://safariadblock.com

Hi.
First of all, thanks for this plugin. Very nice slider.
However, is there anyone aware of a conflict between this plugin and the Jquery plugin Lightbox please ?
My problem is I can’t use ‘Lightbox’ an ‘Awkward Showcase’ in the same page… 

Very neat and clean slider.. working like a rock!! (Y)

Add some touch events for scrolling on non-desktop devices and it’s killer!

Gracias muy buen efecto ¡¡¡¡¡¡¡¡¡¡¡  :D

Hi! Great slider. I have a quick question. Is there a way to do the a similar page to the page with the kid with the glasses but when you roll over an item it hovers just on that specific area and is clickable. So like the thumbnails but on the actual image. Thanks.

hello , i have the plugin on my website but it doesnt scroll automaticly. Can someone help plz

in the javascript settings in the head just change the ‘auto’ setting from false to true, that should do the trick for you.

Awesome slideshow! We will be using this a lot going forward. I’ve also solved the Cufon problem. On the full .js file, add the Cufon.refresh(); statement to line 448.

The minified version is harder to describe where to add the statement, but if the admin would like to shoot me an email, I can provide my altered min.js version.

Already done but nothing change (( help plz

 yessssssssssss its working now ! 10x

Hey, so it worked but then stopped working? Can you provide a link?

Hi, first off thanks for an excellent plugin.
How would I have the numbers appear on top of the image in the bottom right corner?

Hi, great plugin.

I would like to use the full width version, but I’ve noticed that it won’t center content, and instead fixes it to an absolute left position, instead of expanding along with the window.

Is there a workaround where I can have a fixed content width, i.e. the ‘showcase-content’ div, but the bigger container always centers it. On your demo it also does this fixed behavior, leaving the slider wherever it starts when you load the page.

Would it be possible to make the main ‘showcase’ container always dynamicall resize to the width of the window and the ‘left’ position would be calculated based on this?

Thanks so much,
chris

Hello

thnx for great Plugin but i have a questions in quick

 i need to move pagination  div from bottom to the top of the page how i can do something like this

thanks

You can position the pagination via CSS.

 Hi I’ve run into the same problem as the original poster. I’ve just started playing around with your showcase – looks great so far in FF and Chrome, but will crash IE . load this page: http://www.beforeandagain.com/SearchResults.asp?Cat=131

Hi, i love your showcase plugin , can anyone help me with a problem i will like to have the content_width:603, and the thumbnail restriction to be 690px ,thanks

Thank you for this plug-in !
I try to use it with other plug in but it doesn’t work. For exemple, I try to implement twitter in a slide with tweet.jquery ( http://tweet.seaofclouds.com/ ) but i see nothing appear… Do you have a solution ?

  Hello Joakim

thanks  for your reply i tried css  but now way i think it’s related to java-script files

Hi. It works great in chrome, firefox, safari but in IE it just displays the images down the page any ideas why?

Hi, do you have a online page to show me

http://www.goldenridgeroofing.com.au/

I apologize, it was just a weird glitch that happened when viewed it locally, now that i have uploaded it to a remote server its fine thanks heaps  

Is there a way to add deep linking into this script so that people can bookmark or send a url of a particular slide?

HI Awesome Plugin, but is it somehow possible to have an individual tooltip text for each tooltip instead of a plus icon.

how to add a new Anchor

Are there additional transitions in the works, or does the plugin support transition plugins?
Also, any chance of getting some better/more thorough documentation? I’ve not actually been able to figure out what ‘viewline’ is or why I would want to use it in conjunction with this plugin?

Touch screen support! for devices like the iPad would be great! So that users can swipe to move onto the next section!

Touch screen support! for devices like the iPad would be great! So that users can swipe to move onto the next section!

Help!
The slideshow will cause IE 8 to give an error message that ”A script is causing IE to run slowly” . It works fine with IE 9/FF/Chrome
I looked at the script console in IE 8 and each time i killed the script from running, the console showed:
 Operation aborted  jquery.aw-showcase.js, line 943 character 7

test with IE 8 this page http://www.beforeandagain.com/category_s/131.htm

any suggestions?

Make sure….

thumbnails_slidex: 1

URGENT HELP PLEASE !I have one gallery (gallery_one.html) made with Awkward Showcase and it is working fine. (Thank you for this GREAT plugin. Loved it !)Now, I need to call this gallery from another page (main.html) and it should appear inside a Modal Window. (Popup).So, in main.html I got a couple of links: Link to Gallery One
Link to Gallery Two
Link to Gallery Thee
Each one of this links must open a Modal window with the Awkward Showcase *fully working* inside it.Could anyone give a help on this?Thanks in AdvanceH3li0

Thanks Art D.
that made the error message go away.

However,
1) the tool-tip thumbnails do not line up with the ”plus” icon – they are way off.
2) i am using a vertical thumbnail bar, and the bottom arrow disappears in IE 8.

these both seem like CSS issues, but again, everything works fine in IE9/FF and Chrome.

I appreciate any ideas…
thanks
 

How to load flv video??

Thank you for sharing this awesome plugin!!

Hi, I love your plugin!!! It is definitely one of the most flexible and varied slider plugins I have used. I just have one problem: I have configured it so that I have auto:true, pauseonhover:true and stoponclick:false, yet when I click on a thumbnail, the slideshow stops! Is there something wrong with my code? You can see a demo of it here: http://www.emaginetestbed.com/lotte/

Hej!

Very nice plugin. In fact, one of the best in its field. However, it feels it’s not complete yet. For instance, if the thumbnail navigation auto advances so that the thumbnail of image viewed is positioned at the center, or on left/right side. Also, having the thumbnail navigation auto advancing as for the slides would be great.

Tack!

Hi, this is very nice! Would it be possible to put text in the vertical thumbnails instead of images to use them like tabs… like for a featured content slider?

Yep, just put text instead of an image in the thumbnail container.

Great functionality and look. But is it possible to place one showcase inside of another one?

Hi, I have a new issue – I tested your demo pages on IE 7, and the showcase doesn’t work. All the images appear on the page, rather than in a slider. I get an error notice in IE 8, but I could probably live with that. Any ideas how to resolve the IE 7 issue? Any hacks, conditional comments, etc.?

Sabahat-

I had trouble with IE7 and ”pauseonover (default: true)”.  Remove that line and your slider should work.  At least mine did.

Hi everybody. I need your help. I want to goto a specific slide with an external button to showcase in the same html page. How can I do it?

Can someone help me? Please.

It doesn’t seem to be working with jQuery 1.6

Very nice plugin.

But i wonder how to replace the number by Radio image in the simple gallery ?
Thanks in advance.

Chris

Really its a very  nice plugin.Thanks for sharing it.

I would like to share couple of things to you in which we are having some issues while rendering to the data(fetching through XML) on the aw-showcase slider…

Awkward Showcase – Demo #2          $(document).ready(function(){        $(‘#showcase’).awShowcase({                  content_width:            580,                  content_height:           365,                  fit_to_parent:            false,                  auto:                     false,                  interval:                 3000,                  continuous:               false,                  loading:                 true,                  tooltip_width:            200,                  tooltip_icon_width:       32,                  tooltip_icon_height:     32,                  tooltip_offsetx:         18,                  tooltip_offsety:         0,                  arrows:                   false,                  buttons:                 false,                  btn_numbers:             false,                  keybord_keys:             true,                  mousetrace:               false,                   pauseonover:             true,                  stoponclick:             true,                  transition:               ‘fade’,                   transition_delay:         300,                  transition_speed:         500,                  show_caption:             ‘onhover’,                   thumbnails:               true,                  thumbnails_position:     ‘outside-last’,                   thumbnails_direction:     ‘vertical’,                   thumbnails_slidex:        0,                  dynamic_height:           false,                  speed_change:             true,                  viewline:                 false              });          $.ajax({ type: ‘GET’, url: ‘multimedia.xml’, success: parseXml }); function parseXml(xml){ $(xml).find(‘node’).each(function() {                 var data = $(this);          var imageURL = data.attr(‘urlIMG’);                   var thumbURL = data.attr(‘urlThumb’);                 var directoryURL = data.attr(‘urlDir’);                 var title = data.find(‘title’).text();                   var description = data.find(‘description’).text();                                    $(‘#slider’).append(”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”+description+”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”+title+”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”);                 $(‘#slider’).append(”);               });      }});

Slider div wouldn’t load or work under the showcase div… Just need to know how can i load slider div under the showcase div? 

May you please have a look and try to help me out….???
Thanks in advance,
Maxi 

Thank you! That did the trick, as far as the basic slider goes. But now, I can’t get the thumbnails to scroll in IE 7 or 8. My frustration level is peaking with IE. I actually switched to Nivo slider to see if that worked better, but I get a Cleartype issue in IE 8 with Nivo slider (ugly, jagged edges to text and PNG images – ugh!). At least with awShowcase, everything is beautifully displayed.

Very nice tool. Is there a way to pause the automatic scrolling while e.g. a lightbox is running? I couldn’t find a start/stop command.

is there a way to make this function to display more than one image at a time? I have a series of images about 300 pix wide, I would like them to be visible in a row as many as can fit on the screen at one time and click the arrow to advance to the next set.  Right now it looks like only one pic can be advanced at a time

Great jQuery Plugin, the best one that I found, thank’s

Great slideshow! Works for me fine in Chrome, Firefox, Safari and Explorer. But there is a bug in IE with the anchors. When you go a few times on different anchors it’s not working more very well. It seems the working of it is then turned around, when your at the anchor nothing shows, but if your not on the anchor it shows the tooltip. This happens not in the beginning, only after a few times. Maybe you can fix this in a update??

I really love this slider for it’s ease of use and for the ability to put tooltips on the images. But I’m also trying to build ”responsive” sites these days, so the fixed width of the slider makes this impossible. Have you considered allowing the image to be fluid (width:100% of its container) instead of having a fixed width container? I realize that might be difficult with the tooltip positioning, but I just thought I’d ask.

Tks, i love this plugins.
I want to goto a specific slide with an
external button to showcase, ????

Hi Davide, I had the some problem than you.

the resolution:

1. Sorry about my english rs

2. open the jquery.aw-showcase.js and replace ”changeContent” to ” jQuery.fn.awShowcase.changeContent”, thats make the function changeContent public.

3. Inside your html page, you have to call the slide with a number, like this:

$(‘#externalbuttonid’).click(function() {

   jQuery.fn.awShowcase.changeContent(0);

});

work fine for me.
Renan Mota

Hello, could you please check why in this site (http://tinyurl.com/3ctvxng) the slider looks broken if viewed by iPhone/iPad or via Safari for Windows using the Developer menu and User Agent iOS 4.1. for iPhone and iPad?

I have a test site wihout plugins and with the clean theme and the problem is the same :/
I can’t figure out what the problem is…

this is the error the debugger gives out:
”TypeError: Result of expression ‘$(”#showcase”).awShowcase’ [undefined] is not a function.”

Please help

Internet Explorer Error Solution (for me)

In my script, problem was thumbnails_slidex set to 0 (auto). when I set to 1, IE stopped spamming about unstability error.

Autor of the slider, go and work hard fixing bug! You know now what’s causing it (more or less ;P).

how do you create thumbnail again? except for setting thumbnails = true

Hi, great work !!!! i was looking form this!!!

but i have little problem
i cant get the buttons/numbers to get up the image… i put z-index everywhere and nothing, they still get under the images. Im talking about the little circles (or numbers if you whant)

Will this work in Iphone and other mobiles devices??

works nice on iPad and iPhone

Hi, I would like to jump from an internal a href link to another slide without using the buttons/thumbnails. RenanMota posted a solution but it doesn’t work for me. Does anyone have a solution for this? thanks a lot!

great plugin. thank you so much! easy to use, has all the features I want.

quick question. can I use this on commercial projects? 

Hi M R,
What kind of error happens?
work fine for me, see http://www.stamonica.org in cases section.

hi RenanMota,

thanks for your reply! I’m not sure which line I have to edit. I tried to edit line 552:

function changeContent(id, direction) to function jQuery.fn.awShowcase.changeContent(id, direction)

But after I’ve done that the whole slideshow isn’t working anymore.. Any advice?

Hello everyone.

I have made a Portfolio page which opens an image gallery (Awkward Showcase) inside a Fancybox window (iframe). 
Inside fancybox window, the images keep ”piling up” vertically until the end and only after that, they form the correcthorizontal layout.
Here is the link: http://www.way2play.com.br/paginateste/mentaeventos/portfolio.html

Does anybody know how to keep loading the images ”in place” without messing with my Layout? Maybe with a Loading Icon ?

Thanks in advance,

Helio

Hi M RYou must replace all ”changeContent” to ”jQuery.fn.awShowcase.changeContent”.because the function changeContent, now must be called by jQuery.fn.awShowcase.changeContent.In the script-jquery.aw showcase.js, just replace all terms ”changeContent” to ”jQuery.fn.awShowcase.changeContent”

Hi RenanMota,

thanks for your quick reply! I’ve changed all changeContet tags so far and it works pretty smooth, thank you! But I have found a bug or an error – you might help me with that. You can check it out at: http://www.stokedesign.de/kunden/schlepuetz/

At the first slide ”FIT CONCEPTS” I have added a hyperlink called ”unzählig andere vor Ihnen” which is linked to side 3. Once you have slided down to slide 3 and then go back to slide 1 (FIT CONCEPTS) the hyperlink is not working anymore? Do you have any idea?

hummm…. Try this:

Put this code:

$(‘.referenzen’).click(function() {jQuery.fn.awShowcase.changeContent(3);});

after this: ”…wie es unzählig andere vor Ihnen gemacht haben.”

I think its work now.

Hi, I’ve put your code right before the closing body-tag – now it doesn’t slide at all.. I don’t get it? Why does it have this kind of error?

I’m having trouble putting multiple instances on the same page.

Strange things happen like the 2nd slide opening up in a new window and JQuery throwing this error:
attempt to run compile-and-go script on a cleared scope
wrapInner:function(a){if(c.isFunction(…nodeType===1&&this.appendChild(a)})},

Thanks for this great plugin!

Quick question – is it possible to create custom text links which transition between the slides? Any information on how to do so would be fantastic.

Thanks.

Sorry, not in the current version. Maybe an upcoming feature.

Sorry, not in the current version. Maybe an upcoming feature.

Hi rsgx, is it working? Would be nice to see an working example? 

Hi rsgx, is it working? Would be nice to see an working example? 

It is, but the site isn’t live yet and probably has a way to go.

I’ll be sure to put up a link when it’s done.

Thanks again!

well how did you do it RenanMoto’s solution is not working for me. Where did you put his js code and how did you code your hyperlinks? He posted a solution for my problem but I don’t know how to integrate it..

I see! I think what I was trying to achieve is not quite the problem you are having – I simply wanted my main menu to link to the slides below it.

Having inserted a hyperlink within the slider gives the the same problem you are having, which is also a problem for me since I will likely use hyperlinks in much the same way.

Once I find a solution, I’ll update here – unless someone finds one first.

Is it possible to have Fancybox/Shadowbox links inside Showcase content? Basically when the viewer clicks on a link (inside Showcase), a larger view of the image appears via Fancybox/Shadowbox. Is there a code or script I should be applying to Showcase so that Fancybox can work on the links inside the slider?

Here is a test page: http://www.lmerced.com/design.html

Okay. This is…amazing. But, when are you going to officially release this as a free jQuery script (not only for WordPress)? Thanks. It looks great.

It’s not only for WordPress. In fact, it’s the exact opposite.

Hmmm, seems this is going to be more of a problem than I initially realized. I’ve added a JQuery scrollbar too, and every time you switch to another slide it’s as if it reset something or renders the script void somehow – I have a feeling the fix is simple but my knowledge is limited at this point.

Hi, I am having the usual problem with IE where the script will not work without changing the thumbnails_slidex: to 1.   Now it is set to 1, the thumbs move about too much, can you help with this? http://merlin.horizon-host.com  Thanks for the help.  PS I am unsure of the size to use, is this slider too small?

For anyone who likes to use hyperlinks inside the showcase to switch to another slide:

Edit following line:

//before
function changeContent(id, direction) {

//after
var changeContent = jQuery.awShowcaseChangeContent = function(id, direction) {

Now you can use awShowcaseChangeContent for your hyperlinks:

$(document).ready(function() { 
$(‘.container’).live(‘click’,function() {
$.awShowcaseChangeContent(XX); //XX number of the slide
});
});

hyperlink

Greets from Germany,

Marius

Hi rsgx, see my post above! 

Marius,

Thank you for this fix! Hyperlinks are now working for me, however as I have an additional JavaScript within the container (to change the scrollbar), that still doesn’t work.

I appreciate you posting the update, it’s a step closer to helping me get this sorted.

Hi from Germany too, seems like you are in customization of the content slider. I’m still searching a possibility of make the thumbnail carousel continous just like jquery.cycle. Do you have a solution?

Thanx in Advance!
Dietmar

Hi MR – I’m trying to do this too but I’m css/xhtml not js guy. How exactly to you code your hyperlinks using the above?

Many Thanks, M

Hi M1,

it’s pretty easy: if you use the code above just create your hyperlink using a class element. For example: test link.

Thanks MR – just to be clear (I’m a bit slow with JS):

I’ve changed the line in aw-showcase as above, but where does this go:

$(document).ready(function() { 
$(‘.container’).live(‘click’,function() {
$.awShowcaseChangeContent(XX); //XX number of the slide
});
});

Then when I want to create a link using test link how does it know what slide to go to?

Many thanks for your help.

$.awShowcaseChangeContent(XX); //XX number of the slide <—–
change XX to the number of your slide

But I have 8 slides and want a separate link to each – eg a menu – so:

$.awShowcaseChangeContent(01);
$.awShowcaseChangeContent(02);

if so do I format the links:

test link
test link

or have I got completely the wrong end of the stick?

Thanks, M

dammit – just can’t work out this JS – can anyone help with an idiots step by step / cut and paste guide? I just want to be able to use hyperlinks to load slides from a menu rather than the thumbnail feature.

Many thanks in advance, M

OK – Got it. For anyone else trying to sort this out here’s what worked for me (with thanks to MR and all who came before):

1. Change the following line in jquery.aw-showcase.js (default name):

//before
function changeContent(id, direction) {

//after
var changeContent = jQuery.awShowcaseChangeContent = function(id, direction) {

2. Add this script to your HEAD:

$(document).ready(function() {

$(‘.slide01′).live(‘click’,function() {
$.awShowcaseChangeContent(05);
});

$(‘.slide02′).live(‘click’,function() {
$.awShowcaseChangeContent(06);
});

});

Spacing for clarity.

2. Format your hyperlinks like this:

test link
test link

Fine in FF5/IE9.

One of these days I’m going to have to read the js manual rather than hacking this stuff.

any solution for that? same problem, installed fancybox but does not work properly

is there a way to get the slider to resize to 100% width when changing the browser width?

At the moment when you have it set to 100% width if you make the screen smaller the image stays in same position until i refresh the page.

Hi everyone!
Thanks for this awesome work! Really easy to use and to customise!

I just have a display issue with IE9… does someone know about it ?

HI !!

I have a little probleme with the demo 6 which I try to use. Espaciatly when I try to change slides using the number navigation.
For example if I want to go from slide 3 to slide 6, it ‘s impossible, I just make one by one. Do you know why ?

Thanks for  pluging!!!

Hi M1,

you have to use the container class name to link to another slide, not the number of the slide! 

$(‘.slide01′).live(‘click’,function() { // container name for hyperlinks that links to slide 1
$.awShowcaseChangeContent(01);  // goes to slide 1
});

$(‘.slide02′).live(‘click’,function() { // container name for hyperlinks that links to slide 2
$.awShowcaseChangeContent(02); // goes to slide 2
});

etc…

hyperlinkcode: link1, link1

Hi,

I’m having a real issue with getting this plugin to fire from within an iFrame in Firefox.  I am loading the gallery as a separate page from within an iFrame in an overlay.  I have put an document ready call in the document itself, and have tried an on frame load from it’s parent, but neither seems to be working.

In a webkit browser all seem to be fine and it is working a treat, but firefox doesn’t want to play ball!

Any ideas?

Thanks

Marc

It would be great if you could add also some dynamic positioning to the caption, like you have done with the tooltips. With f.e. caption_width, caption_height, caption_offsetx, caption_offsety. But it is not a show stopper. Still like it so far. 

Hello, great job. How do we stop making it an infinity slider?

Did you get a solution for the ”infinity continous” thumbnail carousel?

Hi,

I have an issue in IE7 whereby if I have to lots of content on a slide it doesn’t display correct:

I have two showcase-content-wrappers in one slide and I don’t think IE7 likes the css display:table-cell

Any advice?

Thanks,

Michael

maybe try putting 2 divs at the same level within a single showcase-content-wrapper as a replacement for 2 showcase-content-wrapper divs in a single slide?

The automation doesn’t seem to work when I set viewline and auto to true, it ony works with one frame on mouse out. Does anyone have a solution for my problem? Förslag?

Awesome plugin! thank you. i’m trying to do the thumbnail layout but as a grid. I’ve got all the styling but can’t seem to figure out the pagination when reaching the last visible thumbnail in the grid. i’ve added a screen grab for reference. any help would be appreciated.

Hello,
I was trying this plugin with IE7 too, but I get an erroron this page :
  Line: 17
  Character: 76364
  Code: 0
  Error Message: Object doesn’t support this property or method
  URL: http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

I get the same problem with the page I made.

Do you see what can cause this issue ?

Thanks,
Samuel

Have exatly the same problem – it moves just by one frame and then stops…

Does transition_delay work? No matter what number I tried it was always too fast. I just downloaded 1.1.1. I also had trouble with the auto sliding. It didn’t always work on load, or after manual switch.Tested in IE7-9. Firefox 5. Safari 5.1.

Hi!

I too will jump on the bandwagon and thank you for this truly helpful and incredible plugin! 

I was wondering whether anyone could help me out with the following issue: I am trying to make the showcase-content div fill 100% of its parent, however, I cannot seem to achieve this. Any help in this regard would be much appreciated!

Man this is great stuff. Going to try this out, been using others but like that it handles multiple stuff.

C’mon then!

Hi, Do you think you’ll create a 100% width and height option, to have a full screen slider ? I hope so ! Your plugin is really great, and I’m using it more and more, recomending it to my friends, but for full screen purposes, I have to use other devices, I hope you’ll add this feature ! Keep up the good work guys !

If you want to use multiple instances on the same page, I achieved it by wrapping the plugin in an each function

return this.each(function() {
   // WRAP LINES 102-1218 OF jquery.aw-showcase.js
});

hope this helps someone.

Brilliant plugin!

On IE8 I found that tooltips got out of sync if the user moved their mouse on and off quickly. So to fix this I separated out the animateTooltip, rather that it relying on the tooltip===null.

So in the js file:

jQuery(this).mouseenter(function()
{
  animateTooltipIn(container, coords[0], coords[1], content);
});
jQuery(this).mouseleave(function()
{
  animateTooltipOut(container, coords[0], coords[1], content);
});

Love it thanks for sharing

This doesnt seem to return to the beggining again after it reaches the end of the slide show. Is there an option to make this rotate?

This doesnt seem to return to the beggining again after it reaches the
end of the slide show. Is there an option to make this rotate?

Hi, is there a way to lazy load images with this? 
I am using galleriffic at the moment which only loads the next two slides (which is great on a site with many, many big images) but can’t display html content. So any hint how to tell awkward showcase to load some images in the slides on demand would be greatly appreciated!

Hello!

Great thanks to you for your wonderful plugin. 

But I had faced with the problem of using several ones on a page. I suppose that ‘showcase-thumbnail-wrapper’ is incorrectly calculated in this case. Result of this bug: it scrolls thumbnails beyond boundaries in showcase when we press on a navigation button. 

Can I somehow avoid this?

I initially thought transition_delay would control the time between transitions but it looks like ”interval” does that. Does anyone know what transition_delay does?

Can anyone figure out how to make the arrows appear only on hover? (similar to how the captions work)

The Awkward Showcase script produces a ”Stop Script” error in Internet Explorer 8.
Everything works fine in other browsers (FireFox, Safari, etc.).
How can I fix this so that Awkward Showcase works in IE8?
Thank you

Look under ”Known Bugs” above

Thank you. I changed thumbnail_slidex to 1. It still produces the ”Stop Script” error in IE8. Please let me know when this problem is fixed.
Awkward Showcase is otherwise a really excellent and great looking plugin. I am anxious to use it when you get it to run in all browsers.

About vertical thumbnails, can i have them on the left instead of the right? and how to I do it. thanks

Got it!

I was just researching this problem and thanks for addressing this.  I am however new to jquery and javascript.  can you advise exactly where this should be placed (which document, etc.)?  Thanks!

Yes please, can you help us jquery newbies. How can I add more than one slider to a page?

Is there any way to make the slideshow transparent so that when I use the menumatic drop down script, the sub headers is on top of the slideshow

Is it possible to load the thumbnail into the main well onhover instead of onclick and for the carousel to unpause onmouseleave?

This is amazing.  In a situation where you have a large amount of slides, is it possible to have a chapter navigation that jumps to a specific range of thumbnails, like the numbered buttons on the bottom?  Or is there a way to have the numbered buttons jump/slide to a bookmarked thumbnail?

hey.. it’s really great… but it isn’t working on IE7… any suggestions….

So… does this not auto resize your images to the content_width & content_height?  The window is sized as specified,  but the images themselves are only partially shown and not properly resized to the window size.

Hello, 

Can i have the thumbnails to fade instead of vertical transition i am showing one thumbnail per picture and i just want them to fade in 

preview: http://www.stillspty.com/index2.html

Did you ever figure this out? I need to use more than one slider as well and everything I try doesn’t seem to work. Any help would be greatly appreciated. Thanks!

Hi, does Viewline work in continuous mode? And if not, is there a way to make it work with continuous mode? Big thanks

Hello,

thanks for nice plugin

i have used of this plugin for 10 showcase that each have 5 slide in one page.
if id or class for all 10 item was block ,this plugin can`t understand it and repeat one showcase for another showcase.
i need to one way for solve it.
thanks

There appears to be a bug which exists mainly for IE where the getElementWidth and getElementHeight functions don’t work because they don’t take into account that the margin padding or borders variables (elWidth, elPadding, elBorder) may evaluate to NaN, hence evaluating the entire width or height to NaN. Sample code to fix would be:

/* Returns the correct width for the element, including width, margin, padding and borders. */ function getElementWidth(el, incWidth, incMargin, incPadding, incBorders) { incWidth = typeof(incWidth) !== ‘undefined’ ? incWidth : true; incMargin = typeof(incMargin) !== ‘undefined’ ? incMargin : true; incPadding = typeof(incPadding) !== ‘undefined’ ? incPadding : true; incBorders = typeof(incBorders) !== ‘undefined’ ? incBorders : true; var elWidth = (incWidth) ? jQuery((el)).width() : 0; var elMargin = (incMargin) ? parseFloat(jQuery((el)).css(‘margin-left’)) + parseFloat(jQuery(el).css(‘margin-right’)) : 0; var elPadding = (incPadding) ? parseFloat(jQuery((el)).css(‘padding-left’)) + parseFloat(jQuery((el)).css(‘padding-right’)) : 0; var elBorder = (incBorders) ? parseFloat(jQuery((el)).css(‘border-left-width’)) + parseFloat(jQuery((el)).css(‘border-right-width’)) : 0; if (elMargin == parseFloat(elMargin)) { elWidth += elMargin; } if (elPadding == parseFloat(elPadding)) { elWidth += elPadding; } if (elBorder == parseFloat(elBorder)) { elWidth += elBorder; } return elWidth; }

For so many day I was searching this type of plugin ….. Thanks for this great info.

I’d like to second a request to make this slider responsive design compatible. Thanks for your efforts!

+1, now it’s not work correctly

Hi I need to place the arrow navigation below the pictures

Hi,

Just wanted to say your slider is great!

With IE 7 & 8 the next and previous arrows don’t appear on the left and right correctly, it’s almost as if they are displaying block?Any idea how to fix this?

Thanks again for your awesome slider!

Max

This is amazing.  In a situation where you have a large amount of slides, is it possible to have a chapter navigation that jumps to a specific range of thumbnails.

Hi,
I like this showcase-script a lot, it suits perfectly my needs! It works fine with all major browsers on the Mac. It also works fine with Firefox, Chrome and IE9 on Windows (Parallels, Windows7). However, I have problems with the background of the captions (.showcase-caption {background-image: url(images/white-opacity-80.png);}) in IE7/IE8 (Parallels, Windows7, IETester as well as on a Notebook Windows XP, IE8): it doesn’t fade in/out correctly. There is a grey background flashing before the white bg-img appears.
I unsuccessfully checked every possible option to eliminate this ”bug”. I don’t think its a bug, most likely it’s just a ”piece of cake”. Has anyone a clue how to solve this problem?
Many thanks

Hey All,

Just loving this Showcase Plugin. However my implementation has required some css hacks to achieve my visual layout, which in turn have resulted in some functionality bugs. I needed to position the thumbnails in the bottom right corner of the showcase container and give it a fixed with of about a third of the total width. I have it looked great but its very hacky and outside the frame work of the plugin. My positioning and width of the thumbnail container has resulted in thumbnail scrolling being disabled. For this project that is fine as i only require to have 4 slides and display 4 thumbs.

I started going through the plugin and tried to alter the conditional code and the applied inline styles and made a little head way, however I needed this to just ”Work” and so went with my css hacks so the project can proceed.I’m just wondering if I’m totally missing something in the plugin settings and and my hacks are totally unnecessary and the plugin will let me achieve this. I’m no javascript/jquery ninja but I’m pretty sure i’m correct in my assessment of this. Is there an easier way to cleanly achieve my wanted layout of the plugin elements? And if not are their any plans to allow for more static settings for the elements. I feel the ability to have that kind of custom control would really make the plugin the ”ultimate” content slider!

I’ve attached a screen of my layout of the slider.

You can also preview my demo page here: http://72.3.249.139/nsd-ent.ca/index.html

My code still needs some cleaning up so please be gentle

Thanks again as I love this plugin.

Cheers,
Graeme

Hi!

I love this plugin! I got it to work with wordpress, but there seems to be a problem.. sometimes the whole slider goes black! You do se a small piece of the slider image to the left, so it looks like a black div layer is on top!

this problem is in viewline. Anyone else that has the same problem?

graet plugin.. currently using it on my sharepoint site but i have a problem…
i am trying to read a the content of my annoucements and basically show them inside the plugin..
after i read the records from my service, i am creating the elements dynamically.. like this
  var uSplit = $(this).attr(”ows_Title”).split(”, ”);
                        var body = $(this).attr(”ows_Body”);
                        //var newLine = ”” + uSplit + ””;
                        //$(”#links_ul”).append(newLine);                        newLine = newLine + ””;                        newLine = newLine + ” ”;                        newLine = newLine + ””;                        newLine = newLine + ”  ”;                        newLine = newLine + uSplit + ””;                        newLine = newLine + body;                        newLine = newLine + ” ”;                        newLine = newLine + ””;                        newLine = newLine + ””;                        newLine = newLine + ””;                        $(”.showcase”).html(newLine)and on my page i am created the div with id showcase..just trying to append to to that div and it doesnt work.and on my page i am created the div with id showcase..just trying to append to to that div and it doesnt work.It just creates the divs and  doesn’t set up content and creates the content and thumbnail array since  .showcase-slide is rendered from my javascript on to the page. any idea ?

im somehow new in jquery stuff etc…
i love this slider, coz it have alot of features..      as i see for now, i cant add 100% to images or slider (for fullscreen – that would be great feature).  i think that would be great for slider, even better that supersizer in some parts…

any fixes for this yet?

Really nice….
I love them
Thank you so much for the brilliant stuff

In fact I’ve solved my issue for IE8 in any event.
In some case the methods computing width and height returned NaN so I’ve added a test to replace NaN by 0 and all works fine now.
Here’s the code :

        /* Returns the correct height for the element, including padding and borders. */
        function getElementHeight(el, incHeight, incMargin, incPadding, incBorders)
        {
            incHeight = typeof(incHeight) !== ‘undefined’ ? incHeight : true;
            incMargin = typeof(incMargin) !== ‘undefined’ ? incMargin : true;
            incPadding = typeof(incPadding) !== ‘undefined’ ? incPadding : true;
            incBorders = typeof(incBorders) !== ‘undefined’ ? incBorders : true;
            var elHeight = (incHeight) ? jQuery((el)).height() : 0;
            var elMargin = (incMargin) ? NanAs0StringAsFloat(jQuery((el)).css(‘margin-top’)) + NanAs0StringAsFloat(jQuery(el).css(‘margin-bottom’)) : 0;
            var elPadding = (incPadding) ? NanAs0StringAsFloat(jQuery((el)).css(‘padding-top’)) + NanAs0StringAsFloat(jQuery(el).css(‘padding-bottom’)) : 0;
            var elBorder = (incBorders) ? NanAs0StringAsFloat(jQuery((el)).css(‘border-top-width’)) + NanAs0StringAsFloat(jQuery((el)).css(‘border-bottom-width’)) : 0;
            elHeight += elMargin + elPadding + elBorder;
            return elHeight;
        }
       
        /* Returns the correct width for the element, including width, margin, padding and borders. */
        function getElementWidth(el, incWidth, incMargin, incPadding, incBorders)
        {
            incWidth = typeof(incWidth) !== ‘undefined’ ? incWidth : true;
            incMargin = typeof(incMargin) !== ‘undefined’ ? incMargin : true;
            incPadding = typeof(incPadding) !== ‘undefined’ ? incPadding : true;
            incBorders = typeof(incBorders) !== ‘undefined’ ? incBorders : true;
            var elWidth = (incWidth) ? jQuery((el)).width() : 0;
            var test;
            var elMargin = (incMargin) ? NanAs0StringAsFloat(jQuery((el)).css(‘margin-left’)) + NanAs0StringAsFloat(jQuery(el).css(‘margin-right’)) : 0;
            var elPadding = (incPadding) ? NanAs0StringAsFloat(jQuery((el)).css(‘padding-left’)) + NanAs0StringAsFloat(jQuery((el)).css(‘padding-right’)) : 0;
            var elBorder = (incBorders) ? NanAs0StringAsFloat(jQuery((el)).css(‘border-left-width’)) + NanAs0StringAsFloat(jQuery((el)).css(‘border-right-width’)) : 0;
           
            elWidth += elMargin + elPadding + elBorder;
            return elWidth;
        }
       
        function NanAs0StringAsFloat(v){
            v = parseFloat(v);
            return isNaN(v) ? 0 : v;
        }

I think I’ve find my issue, in some case your method to find height and width of an html element return NaN,
Here’s the change I’ve done :

        /* Returns the correct height for the element, including padding and borders. */
        function getElementHeight(el, incHeight, incMargin, incPadding, incBorders)
        {
            incHeight = typeof(incHeight) !== ‘undefined’ ? incHeight : true;
            incMargin = typeof(incMargin) !== ‘undefined’ ? incMargin : true;
            incPadding = typeof(incPadding) !== ‘undefined’ ? incPadding : true;
            incBorders = typeof(incBorders) !== ‘undefined’ ? incBorders : true;
            var elHeight = (incHeight) ? jQuery((el)).height() : 0;
            var elMargin = (incMargin) ? NanAs0StringAsFloat(jQuery((el)).css(‘margin-top’)) + NanAs0StringAsFloat(jQuery(el).css(‘margin-bottom’)) : 0;
            var elPadding = (incPadding) ? NanAs0StringAsFloat(jQuery((el)).css(‘padding-top’)) + NanAs0StringAsFloat(jQuery(el).css(‘padding-bottom’)) : 0;
            var elBorder = (incBorders) ? NanAs0StringAsFloat(jQuery((el)).css(‘border-top-width’)) + NanAs0StringAsFloat(jQuery((el)).css(‘border-bottom-width’)) : 0;
            elHeight += elMargin + elPadding + elBorder;
            return elHeight;
        }
       
        /* Returns the correct width for the element, including width, margin, padding and borders. */
        function getElementWidth(el, incWidth, incMargin, incPadding, incBorders)
        {
            incWidth = typeof(incWidth) !== ‘undefined’ ? incWidth : true;
            incMargin = typeof(incMargin) !== ‘undefined’ ? incMargin : true;
            incPadding = typeof(incPadding) !== ‘undefined’ ? incPadding : true;
            incBorders = typeof(incBorders) !== ‘undefined’ ? incBorders : true;
            var elWidth = (incWidth) ? jQuery((el)).width() : 0;
            var test;
            var elMargin = (incMargin) ? NanAs0StringAsFloat(jQuery((el)).css(‘margin-left’)) + NanAs0StringAsFloat(jQuery(el).css(‘margin-right’)) : 0;
            var elPadding = (incPadding) ? NanAs0StringAsFloat(jQuery((el)).css(‘padding-left’)) + NanAs0StringAsFloat(jQuery((el)).css(‘padding-right’)) : 0;
            var elBorder = (incBorders) ? NanAs0StringAsFloat(jQuery((el)).css(‘border-left-width’)) + NanAs0StringAsFloat(jQuery((el)).css(‘border-right-width’)) : 0;
           
            elWidth += elMargin + elPadding + elBorder;
            return elWidth;
        }
       
        function NanAs0StringAsFloat(v){
            v = parseFloat(v);
            return isNaN(v) ? 0 : v;
        }
       

Sorry, double post

is it possible to have two separate carousels on the same page – one with photos and one with videos? i’ve tried but doesn’t seem to work

Great slider.  Is there anyway to have it return to the beginning automatically after reaching the last slide?  Thanks.

I have the same issue …. I would be very grateful of some help

Just set ”continuous=true”

This is REALLY close to what I’m looking for – thanks!  It seems to conflict with another jQuery script I have on the page for a hover effect on my navigation menu. Any tips on how to resolve that conflict?

Hi,

It is a great slider! However, I have a small issue when displaying thumbnails and it is set on auto and continuous. When clicking on any thumbnail the slideshow stops autocontinuing and the slide can only change with a click. Anyone encountered this? Any suggestions?

Hi, where i must to place this code?

I found the issue to getting the ”Stop running this script?” error in IE8 is the absence of either of the 2 attributes for the div tag in the reset line of the css.  Adding the below solved the issue for me.

/* Reset */

div{margin:0;border:0;}

What are the chances that touchswipe capability would be added for use in mobile devices?

All download links are broken!

They’re working now

This slider is fabulous, but I’m having the same problem with IE 7 and 8. :/
Looks and functions perfectly in every other browser… my bosses loved it until one of the dinosaurs opened it up on his ancient XP machine running IE8 and the entire thing is jacked up.

Using a horizontal thumbnail (outside-first) all of the thumbnails are displayed at once, rather than 4 across the top with scroll arrows. In IE it displays the left arrow on its own row/div, clears all the thumbnails below it, and then the thumbnails do the same clear problem to the right arrow. Additionally there is about 50 pixels of padding/margin above and below the scroll arrows, so the thumbnail portion of the slider takes up about 400 pixels of page height.

Any ideas to fix this would be greatly appreciated. My CSS is strong, but jquery not so much.

Brilliant! This solved all of my horizontal thumbnail issues occuring in IE 7 and 8. Thank you!!!

Hi,

We’re working on a new release with some bug fixes. But in the meantime you can scroll trough the comments. Should be a fix for that.
Joakim

how can i change the background color of it? , it always appears black to me.

Loving this tool. So well mapped out. Co-workers are noticing issues with IE9 and the tooltips. Any suggestions?

Thank you for a super plugin!

One problem I’ve stumbled upon is that it’s not possible to use other jquery scripts or plugins within the slides.
ex: I’m using a simple fadeOut on a div when a link is clicked within the slide, but it won’t work. Any idea how to solve this request?

Thanks in advance!

I should add that the fadeOut script works perfectly if I put it outside of the slider.

dumb question time…

how (or where) do I change the amount of thumbnails displayed in the queue? I see five, but damn it, I want four!

probably something simple I am just missing.

-thanks

which element? it is likely within the CSS file provided! most of the style editing can be done via regular CSS.

Even if I set buttons: true I still can’t get them to show. And the class (showcase-button-wrapper) won’t append.

What could be wrong? Everything else works like a charm.

It was there… Just didn’t see them!

Thank you so much for your awesome content slider!  I have been scratching my head for days to find exactly what I wanted.  I’m not the best coder in the world so I had a hard time finding a plugin that was easy enough for me to figure out on my own.  It works great, and is super simple to use.  Thank you for making my life easier!

This is where I implemented the plugin with a few css modifications (site still under construction): http://andreimatorin.com

Hi.

This slider is one of the best but I encounter a problem.

Here is my configuration :
auto : true,interval : 4000,
continuous : true,
arrows : true,
pauseonover : false,
stoponclick : false

When I click an arrow the slider goes to the next but it stops and doesn’t resume.

Is there any solution ?

Thank you.

I’ve found a tiny little bug, actually it’s more like a typo: you’ve called the class that references to the tooltips .showcase-tooltips, but if I try to style this class with CSS it doesn’t work, instead it works if I call the class .showcase-tooltip in the CSS, but leaving it like it was in the HTML. 

Thumbnail array and first image that displays is not in the order I wanted when my website is put online/on server, while the order is right when tested from local host/computer: image.01.jpg, image.02.jpg, etc. Anyone know why?

Used this slider a bunch of times.. I love it – great work. Though now I am having some issues with setting up multiple sliders on a single page. it seems that the values for the .showcase-thumbnail-restriction & .showcase-thumbnail-wrapper DIV elements are not calculated correctly. It looks like the widths are for all the thumbnails on the page. Not sure where to go from here…
Site is in dev right now – send me a pm if you want to look at all my source.
-thanks-sean

Hi guys, thanks for the great plugin. I have a couple of questions. 
1. can we have an additional set of custom buttons for the left/right arrows? 
2. How can I change the default slide to be a different number instead of 1. I want to show say the 4th slide when the page loads.

Hey guys!  Love the slider.  However, I am getting a non-display issue with the thumbnails in IE8?  You can take a look at my implementation here:

http://rawdesigns.net/web2carz/

The slider is halfway down the page, in the middle column.

Any help is greatly appreciated!

Awesome slider! Does anyone know how to set a different interval speed for each slide?

Awesome slider! Does anyone know how to set a different interval speed for each slide?

Hi
there,

I
am using the awkward Showcase – jQuery plugin.

I
have a query and would be very grateful if you could help me!

Here
is my test page: http://www.markguard.com/slideshow.html#1

I
want to get the tooltips to appear outside of the gallery container. I want to
use the tooltips as text info buttons for each image in the slideshow.
Also,
can you get the tooltip to work on click, rather than on hover?

Many
thanks for your help, p.s. – I am using firefox to work with the file, and know
it needs some correcting for IE.

Many
thanks for your help in advance!

If anyone wants to look at my implementation of this slider take a look at http://www.hfse.com
I did a lot of workarounds to get it to do what I needed (different intervals on each slide, moving content in slides, etc.).  
I am using version 1.0, and haven’t tried the newer version as well.

Not as easy as you would think.  They way I did it was to do a setTimeout() in the javascript.  Just trace through the script using Chrome or Firebug and find where you need to place it.  Its been months since I implemented mine so I can’t remember quite where to put it offhand. If you need some help I can take a look at my code and see if I can remember exactly what I did.  The website I currently develop for is http://www.hfse.com if you want to check out my slider.

Did anyone solve this issue?

Hi, is there a way to know the index of the current slide?, I’m developing a mix of lightview and slider content at the same time, but I have issues when I embed the lightbox inside of the awward show content slide, so my solution was to move all my images thumbnails for the lightbox outside of the awwrad’s slider content. So now Im using the callback function to show and hide the thumbnails depends of the current showing slide. But my question is how can I know the id element of the current slide, it’s possible, do you have alternative method to kwno this? is there any method that return the current slide?

How do you trigger slide nth? IE I want it to load on slide 4?

anyone got a solution to this? Any help would be greatly appreciated! thanks!

Great plugin!

I have one request though. You should make it possible to let the URL change with a #-tag when navigating the content. Eg. if you are using it for html content and follows a link within that content and then press ”back” you will see the first content frame and not the one you left from.

Is there any way to change the default ”slide”?

Don’t use this if you plan to have html5 video with flash fallback in the divs… some part of the javascript is conflicting with the flash fallback in IE… sigh… i really liked this gallery.  

Im not a javascript guru, but I’ve made my own solution to the referer problem (navigating away from a current slide and then set the referer slide as current when hitting ”back”):

Just before:

        // *************
        // THE FUNCTIONS
        // *************

Add:

        // Check if hash is set as referer content_id
        if (window.location.hash)
        {
            var hash = parseInt(window.location.hash.substr(1))-1;
            if(!isNaN(hash)) { changeContent(hash, ‘next’); }
        }       

And just after:

        function changeContent(id, direction) {

Add:

            //Set hash as current id
            window.location.hash = ”#”+(parseInt(id)+1);

.. the +1 and -1 is just to avoid a slide refered to as ”0″. This works like a charm in my case, but please let me know if the solution doesnt work..

Im not a javascript guru, but I’ve made my own solution to the referer problem (navigating away from a current slide and then set the referer slide as current when hitting ”back”):

Just before:

        // *************
        // THE FUNCTIONS
        // *************

Add:

        // Check if hash is set as referer content_id
        if (window.location.hash)
        {
            var hash = parseInt(window.location.hash.substr(1))-1;
            if(!isNaN(hash)) { changeContent(hash, ‘next’); }
        }       

And just after:

        function changeContent(id, direction) {

Add:

            //Set hash as current id
            window.location.hash = ”#”+(parseInt(id)+1);

.. the +1 and -1 is just to avoid a slide refered to as ”0″. This works like a charm in my case, but please let me know if the solution doesnt work..

Would be easy if you public methods to get the current Id  you can add this code at almos the end of the pluging then when you start using you can set somthing like this

// public methods       

        this.initialize = function() {

            return this;

        };

        this.showcase_currentId = function() {

            return current_id;

        };

        this.swowcase_previousId = function(){

            return previous_id;

        };

        return this.initialize();

slider =    $(”#showcase”).awShowcase( —-> rest options

slider will hold the reference for this.initialize witch is the object of the awShowcase implementations. after this you can ask for the current id using the metho showcase_currentId

var current = slider.showcase_currentID(); //will get the current index of the slider.

I embedded a html5 video player in the slides. It works great on the first slide, but when you visit another slide it reverts to the browser native player. How can I fix this?

I ram having the same issue

YouTube

I found that for less than IE9 I needed to use this (rel=0 didn’t work with this):
http://www.youtube.com/embed/VIDEO_ID

For everything else I can use this:
http://www.youtube.com/v/VIDEO_ID&rel=0

<?php
if(preg_match('/(?i)msie [1-8]/',$_SERVER['HTTP_USER_AGENT']))
{
    // is IE

I just had a few quick questions.  The website I’m working on can be viewed here: http://beardless.zxq.net/nokings/

I have two problems: I tried to put the captions under the image instead of on top of it, but when I gave it a negative margin to be below the image, it disappears into white when they don’t overlap.  Also, I’m trying to make a grey div to put text in to the right of the large images, but they won’t go on the same line for some reason (you can see it faintly below the image, but it won’t jump up to the same line no matter what I do.

Is there any idea as to what would cause this, or do you need to see my code as well?  Thanks in advance if you can help me out!

Clinton

Hi guys awesome work! I really love it but i got a request: Im trying to ”mix” this with Picasa or Flickr has already someone try this? (If yes please set a demo)
Thanks!

Anyone that could help, that would be great! Is there a way to build a separate navigation menu, so you wouldn’t have to you the arrows or numbers? Say, like, I would make a navigation menu to put at the top of the page.  Also is there a way to ”wrap” an image around the slider?  I’ve included a graphic below.

@Rscott2 Hello try in the *.css style file: .showcase-content-container (Here’s you change the background) and for the Nav the same mate

do any know if it’s possible to have 2 instance of this slider at the same time on the same page?

$(”#showcase”).awShowcase(
        {
            content_width:            1010,
            content_height:            510,
            fit_to_parent:            false,
            auto:                    false,
            interval:                3000, <— Interval!! secconds
……………….

Really nice. Does anyone know how to fix the bug on demo#5 with centering the content on window resize?

If you do the answer is no, but maybe that is something that should be implemented in the next version. Thx!

This is great, thanks.  I’m trying to use this w/ auto set to ‘true’ so the slides and thumbs slide automatically.  Does anyone know if it’s possible to control the way the thumbs slide, for example have the thumbs themselves slide up into the top position and have them loop infinitely rather than returning to the top thumb after reaching the last one?

Awesome slider(s) by the way!  The outcome I am looking for is to be able to disable/hide the up/down arrows on the vertical thumbnail slider if its either at the first thumbnail or the last one… I think this might be done referencing the array, but not sure. Would appreciate any help. Thanks

Hi,
I love this plugin. Very slick. I’m having a problem with the width of the showcase. The width is being generated by script, so it’s inline. I’d like to make the showcase wider. Is there a way to do that?
Thanks anyone who knows the answer!

I figured it out. Was getting my divs mixed up!

Hey out there!

First of all, this Slider is just epic!
Now my little question. I want to implement videos, but there`s a little problem:
Durich watching the video, and moving the mouse out of the Slider, it slides to the next element.
Is there al possibility that it will slide automatically and stop sliding durich a video without having the mouse in the Slider?

Greetings (=

Love this slider – easy to implement, fast and modern.

One problem: Captions… ”Advanced positioning with different animations.”

How do you change the animation from fade for captions?  Would love them to slide in from the top, bottom, left or right…

for our website http://www.streamindjs.com I needed external menus to link to diferent content within showcase so…
to the referer problem (navigating away from a current slide and then set the referer slide as current when hitting ”back”)
I extended the solution with this:

        // Check if hash changes and if it does, change the content according to the number
        $(window).bind(‘hashchange’, function() {
            var hash = parseInt(window.location.hash.substr(1))-1;
            if(!isNaN(hash)) { changeContent(hash, ‘next’); }
        });

it’s not yet a fully cross-browser solution, but works well on the main browsers (without giving the ‘main’ value to explorer)

I posted here the minified version already customized: http://pastebin.com/zNvQhCbV

does this support php?

Thanks for pointing that out Tim! It was a small bug fix. Download v.0.2.1 and replace the plugin file.

Hi, great stuff. I have a gallery with all horizontal pictures, except one. And this one is being cropped rather that resized… is there a way to make gallery resize picture when it is bigger then the frame? Thanx

Hi.
Anybody have fix problem with fancybox?

Love this plugin, really easy to set up thanks!

I have 1 small issue though, even when continous: true, stoponclick: false, my slidehsow stops playing when a nav arrow is clicked. Will only then manually click though the slides.

Any suggestions?

Cheers.

 do any know if it’s possible to have 2 or more instance of this slider at the same time on the same page?

Hi,
I use this plugin which is very nice, thanks.I think I have a settings or css problem, so when clicking on thumbnails it sometime disappear. Instead of moving forward it disappear.Can you advice? fix?
There are some pages with the problem, for example:
http://kisaot.123easyweb.info/%D7%92%D7%9C%D7%A8%D7%99%D7%94/%D7%9B%D7%A1%D7%90%D7%95%D7%AA-%D7%91%D7%A8/%D7%9B%D7%A1%D7%90%D7%95%D7%AA-%D7%91%D7%A8-%D7%AA%D7%9E%D7%95%D7%A0%D7%95%D7%AA/
Thanks,
Daniel

Change ”true” in the line 227, file: jquery.aw-showcase.js
works for my.

TIP: if you have problems with chrome crashing, include all default values in the function call in your document, not just those you want to change. Awesome plugin, nice and easy to customise, but it kept killing Chrome when I enabled thumbnails (although I did edit the plugin to change on hover rather than click, but that shouldn’t make a difference) – I eventually solved it by setting values for all of the parameters in my function call. Thanks again guys, look forward to the wp plugin.

Hi
Thanks for the great share… i would need a version which works with jQuery 1.3.2 … Do you have an older version or an advice for me?cheers

I’m facing the same scenario. Is it possible to have stoponclick apply to the slide itself as well rather than just the thumbnails or slide numbers? This way if someone clicks on the slide to play the video then it won’t keep rotating to the next slide? Thanks to anyone that has a solution to this!

Hi
Thanks for the great share

I’m having the same problem, I’ve embedded a video using Vimeo. I assume the problem is something to do with the video being an iframe? I would love a solution to this problem!

Thanks for an otherwise awesome plugin guys!

Hi,
I used these slider at the same page.
http://www.soshinkaleidoscopes.jp/charity/

for example…at HTML

id change or numbering.

and JaveScript code copy.

$(document).ready(function(){ $(”#showcase”).awShowcase(
.
.

last,change like blow.

$(”#showcase3″).awShowcase(

Seiko.

I am trying to have the title of a slide in a div with id outside the .
I thought I can do it with the custom_function. It suppose to trigger every time there is a change. but it is not… is it a bug or something I do wrong.
I have this  script in the header:

$(document).ready(function()
{
    function updateTitle(){
        $(‘#product-name-title’).html($(‘.showcase-caption’).html());
        alert(‘change’);
    };
    $(”#showcase”).awShowcase(
    {
        content_width:  867,
        content_height: 456,
        thumbnails: true,
        thumbnails_direction: ‘horizontal’,
        buttons: false,
        transition:    ‘fade’,
        thumbnails_position: ‘outside-last’,
        continuous:false,
        thumbnails_slidex: 1,
        show_caption: ‘show’,
        custom_function: updateTitle()
    });
       
});

it works only for the first image, and any click on a thumbnail or arrow does not trigger it. not the alert as well.
Any idea?
You can see it in action here: http://goo.gl/bMEqG

Thanks all.
Daniel

great slider,

Is there any way to run this fill screen so the images fill the screen not matter the resolution and have the thumbnails fixed at the bottom?

I’d like to have the greyed out cover be on the active thuumbnail. Tried moving the background-image: url(images/black-opacity-40.png); tag to the active state in the thumbnail css but that didn’t do it. Can you point me in the right direction please? Thanks!

lisa

How do I build a link to jump to a specific slide from another page on the same domain. E.g. I’m on page: http://www.domain.tld/overview.htm and I want jump to slide #3 on the page domain.tld/slider.htm. Is this possible and if so how? thanks Alexander

 The same is happening to me as well. I’ve made a child theme from Hybrid which uses superfish menu and adding the options to head, or to footer in exernal file messes with the dropdown menu. Did you find a fix?

hi, thanks for the plugin but i have an issue here,
there is a ie8 bug for ”Horizontal thumbnails” mode.. it can not calculate the thumbnails wrapper width..
you can see that also at demo pages with ie8..
isnt there anyone else having this issue?
or can anyone help?

Hi, I have this carousel set to pause on click, is there any way to ”unpause”, i.e. resume automatically playing?

Maybe this code div{margin:0; border:0} will solve your problem.

 I would like to know the same! would be very helpful thanks for a great slider!

attempts to apply this brilliant script in Joomla and still does not work: (. Perhaps some hint? http://tyld.pl

I using dynamic height with tooltips.  Sometimes the images are not very tall and the tooltips are long.  This causes the tooltips to be cutoff at the bottom.  Is there a way to extend the tooltip past the bottom of the picture?

Thanks in advance

Can this be used as full screen and scroll vertically instead of horizontally?

One of my slides is a video. When i play the video the animation continues to slide onto the next slide (same thing happens in the demo). Is it possible to stop the animation when viewing a video, and possible have it resume when video is done

Start with putting this 
});
under line number 1218 in jquery.aw-showcase.js
and after that put this:
return this.each(function() { 
just before line number 102

To put another instance of the slider on a page you just put another variant of the script:
$(document).ready(function(){ $(”#showcase”).awShowcase( { content_width: 700, content_height: 470, fit_to_parent: false,…..Change $(”#showcase”).awShowcase(To$(”#showcase2″).awShowcase(and name the parent div that holds the second slider showcase2.Keep on doing this for every instance of the slider you need on the page.

This is great.
Been working on customising it to suit a site I’m working on: http://www.ok-hybrid.com/store/mark-one-group/08-march/showcase/
Is there anyway to set the thumbnail arrows to hide when at the end of row?

Hi there,
Great plugin, just have slight problem I’m facing, when I add 10 images or more then the right arrow dropped under the images. I’m using Index5, can anyone please help me ot here. thank in advance. Paul

Really great. Simply configuration. I find finally.

 I am having the same problem.  Has anyone come up with a solution?

It would have been great if swipe/touch support is added!

Interesting plugin!! Is it possible to have my thumbnails on another page and when clicked on the specific one for example Slide no.4 open the slider in the new page with Slide No.4 as the default image.

Hi, Am new to this. Can anybody guide me to move the horizontal thumbnails to the top? What do I need to change? Is it in the CSS or the .js code?

1. Go to the index.html and in the showcase settings section

2. Search for thumbnails_position:

3. And change it to…

thumbnails_position:    ‘outside-first’,

That should set the thumbnails at the top of the slider.

 Got it resolved!!

How may I change a option of a instance of awShowcase, for example, hide the captions on a defined click?

Hello, I was having trouble to use fancybox inside contents found this solution that works, using the live() function from jQuery:

Include fancybox normaly and then onready do this:

$(”.showcase-content a”).live(‘click’, function(){
    $.fancybox({
        ‘autoDimensions’  : false,
        ‘width’           : ‘auto’,
        ‘height’          : ‘auto’,
        ‘href’            : $(this).attr(‘href’)
    });
    return false;
});where in showcase content you have something like this:

good luck!

hello,
i had a problem with IE8 or say IE9 in compatibility mode, whenever i try with these versions, the browser will stop responding. i checked even on demo page and same result. it happens only on pages where tooltips are enable. any idea?

 I also want to know this!

Same problem here. This looks like a serious issue.

Great plugin! I just have one problem. All my images keep loading underneath each other for a second or so, before it aligns probably and works as a slider. 
I tried styling the .showcase-load class, but with no result.

I love this plugin, it’s brilliant but there’s just one problem. I’ve got a div that I’m loading this in and the arrows sit on top of that but hang over the edges. The problem is that any of the arrow that is over the div doesn’t work. It’s visible, but when I roll over it nothing happens at all – it doesn’t even change color. Is there anyway to get the arrows to be above everything else?

So my structure is like this:

content……

This slider is amazing, only one problem though – I’m using an image ‘zoomer’ for the thumbnails, this works perfectly for the first div but as soon as I click to go to the next one it unloads the zoomer completely, even if I go back to the first div it doesn’t work when it did before. You can see what I mean here: http://bit.ly/yJDFfy
I’d be so grateful for any help with this as I’ve spent weeks trying to get it sorted but haven’t had any luck

 In style.css line 92, (.showcase-arrow-previous, .showcase-arrow-next{ ) couldn’t you just ad ” z-index: 100″.  I think that will work, but I hacked the hell out of the version I’ve implemented and don’t have time to test it. Cheers.

 I’m trying to add a class to a div that would be rotating in-sync with the slideshow. The div’s are located outside of the ”showcase” div. Is there a simple way to implement this that I’m not thinking of?

Let me know if I’m not making sense, I’ll try to explain it better.

Thanks.

That works perfectly thank you

Awkward showcase makes shallow copies of slides when paging, meaning events are not copied. When you move to the next page, the elements no longer have the mouse over event. Try using jQuery().live() or the newer jQuery(document).on()

Thank you for a great plugin. I’m using version 1.1.1 without modifications. There is a problem when I try to show more then 10 photos on the page. They all render in html, but when I use arrow buttons to got to where photo number 11 must be in the gallery, there is a blank background. And the photos after that one are not displayed either.

Sorry to sound really dumb, but how do I do that? This is the first time I’ve ever used jQuery and think I’ve jumped in at the deep end. I’ve spent weeks trying to fix this, but haven’t got anywhere yet

For the version of jQuery you’re using, jQuery recommends .delegate instead of .live
Check out http://api.jquery.com/live/

You want to change$(‘.zitem’).hover(function() {}, function() {})
to
$(document).delegate(‘.zitem’, ‘mouseenter’, function() {});$(document).delegate(‘.zitem’, ‘mouseleave’, function() {});

or the alternative signature
$(document).delegate(‘.zitem’, { mouseenter: function() {}, mouseleave: function() {}});

What this does is it adds an event listener to the document object and when a event bubbles up to the document, if the originating element matches the selector, the event fires.

This is useful when you need to attach events to elements that do not exist when the page loads. Because awkward showcase creates new elements as you page this is probably the best way to handle this.

Thank you so much, that’s perfect!!

Hi, I have a problem – I use your plugin on web and first image of every gallery is not showing up when i open the page. But then, when i click on thumbnail the image shows. Any idea where i should look for error? Thank you

how to make it compatible with IE6?

Did this get resolved? I’m having a problem with multiple implementations as well

Hello,

Love the plug-in.  I have a couple simple questions.

1.  How do you get a dynamic width option?  So that the widths automatically change to match the selected height.  So that images don’t crop.

2.  How do you get the gallery image to open the image URL in a separate tab when clicked?  So that you can view the full size image.

Thanks!

with thumbnails: true , script shows error in all IE versions (6,7,8) by showing that something in the ”script will make the IE explorer slower, do you want to continue” After clicking YES, it shows the next slider. and the same window repeats again and again and only clicking YES shows the next slide. Thumbnails images don’t change with the slides.  When I remove that thumbnail: true  slides started working as expected but without thumbnails images.  How can I fix it so that they work with thumbnails in IE. Note: They work well with thumbnail:true with all other browsers (FF, Chrome, Safari)

Any help will be highly appreciated.   

This plugin is great, but I just wondered if it was possible to have the width change dynamically rather than the height? That would be amazing if you could

 I have the same problem – anyone got a solution?

Otherwise a great plugin!

I Have the Same problem..

 Just found the solution change thumbnails_slidex form 0 to 1 and it will work again

Did a Total Validator app come bundled with the download? I could’ve sworn I didn’t have that  Total Validator on my desktop.

Hi, it’s really great plugin, probably the best I’ve seen…I have 2 requests :
1.  I want to know how I can to make this plugin to be responsive, and compatible with HTML5?
2. The tooltips are not compatible with HTML5, how can I use the area method instead ?

Are you preparing a new version for this? Or can you help us to make this?  Thank you !

Hi. I love this plugin but i have a problem.  I am using the content slider for my portfolio.  Inside each div or slide, I am trying to use a fancybox gallery to show image thumbnails.  On the first load of the page, fancybox works, but it dosen’t work on the other divs of the content slider.  Basically it only works once. I’m not sure what i’m doing wrong but I really want to use this plugin. Can someone help me.  Warning: I am not a developer so plus dumb it down for me! Here is the code:

$(document).ready(function() { $(”a.grouped_elements”).fancybox({ ‘titlePosition’ : ‘outside’, ‘overlayColor’ : ‘#000′, ‘overlayOpacity’ : 0.9 }); $(”a.grouped_elements2″).fancybox({ ‘titlePosition’ : ‘outside’, ‘overlayColor’ : ‘#000′, ‘overlayOpacity’ : 0.9 }); });     $(document).ready(function(){ $(”#showcase”).awShowcase( { content_width: 960, content_height: 1000, fit_to_parent: false, auto: false, interval: 3000, continuous: false, loading: true, tooltip_width: 200, tooltip_icon_width: 32, tooltip_icon_height: 32, tooltip_offsetx: 18, tooltip_offsety: 0, arrows: true, buttons: true, btn_numbers: true, keybord_keys: true, mousetrace: false, /* Trace x and y coordinates for the mouse */ pauseonover: true, stoponclick: true, transition: ‘fade’, /* hslide/vslide/fade */ transition_delay: 300, transition_speed: 500, show_caption: ‘onhover’, /* onload/onhover/show */ thumbnails: true, thumbnails_position: ‘outside-first’, /* outside-last/outside-first/inside-last/inside-first */ thumbnails_direction: ‘horizontal’, /* vertical/horizontal */ thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */ viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ }); });                                 Natanael Academy (Branding)                Role: Branding Manager                This Winter seven of my classmates and I traveled to Cachalchan, Mexico to work with Academia Natanael, a secondary education system in the Yucatan.The challenge was clear cut; the academy was facing an identity challenge.  As a team we had to help the academy discover their needs and identity in order to gain outside support and donations.As brand manager I worked with the design team to create a new primary and secondary logo.  I also created a branding manual with guidelines for the client, as well as a short branded video which outlines the school’s core values.Skills: Print Design, Video Editing, Branding, MotiongraphicsTools Used: Illustrator, Final Cut Pro, InDesign, After Effects                                                                                                Download Branding Guide pdf                                                                                                                    Nataneal Academy (Branding)                                                                        Natanael Academy (Website)                Role: Designer                This Winter seven of my classmates and I traveled to Cachalchan, Mexico to work with Academia Natanael, a secondary education system in the Yucatan.The challenge was clear cut; the academy was facing an identity challenge.  As a team we had to help the academy discover their needs and identity in order to gain outside support and donations.As a designer I worked on a team with three other individuals.  During the process I created a mood board, photoshop mockup, slider images, and other elements that were used in the final version of the websiteSkills: Print Design, Photoshop Mockups, Mood BoardsTools Used: Illustrator, Photoshop                                                                                Click image to visit website                                                                                                       $(”a.grouped_elements”).fancybox();                   Nataneal Academy (Branding)

Same problem here. 

Hi, Really love this plug in thank you for sharing. I wonder is it possible to have a counter display for the thumbnails rather than using the clickable numbers or graphic? It would be a great help if anyone could advise on this?? Many thanks.

I have this problem too.

 Yes. I’ve used PHP to detect any images in a specific folder and populate the divs accordingly in a loop. It works great.

Thank you for this beautiful plug in, but i can’t use it with master page in asp.net, it shows only images without any plug in, i use css for styling my project

I have a problem when use viewline option in true and coninuous in true this last propitie dosent seem to work, because when the showcase reaches the last slide it stays there

Is it me or does this not work in IE? I’ve added it to a site here: http://bit.ly/yJDFfy but it’s not working and I don’t know if it’s my computer or IE. I’d be grateful is somebody could have a look for me please

Nice plugin!  Just a couple notes:  you probably want to pass in $ to the closure function and not jQuery.  so (function($){})(jQuery) instead of (function(jQuery){})(jQuery).  And that custom function callback would be more useful if you pass back some info to it.  I hacked it to add in a obj and obj2, so I could turn off the previous audio and videos playing and instantiate the new ones in jwplayer and brightcove.

Cheers, keep up the good work.

i have problem using awkward slider, i insert .. into .. when i click submit button, but the form cannot submit.

thanks for your help

 finally a plugin that fits to my needs perfectly! thanks so much!

Is there a way to change the black background color?

It should be this line in the style.css file:
.showcase-content-container { background-color: #000; }

is it possible to use the showcase for two different sliders in one page? if i do so the content of the second one is always just displayed one underneath the other 

Responsive Feature

How to content_width convert in Percentage(%) ?

hi 
I’m a bit new to jquery, so I am still trying to get my head around a few things…Something that’s been asked here already but no answer yet: how do you add thumbnails at the bottom or side of the main picture (as shown in the demo)? Someone above talks about fancybox but… is that the only way? 

Thanks!

Clicking on the link that says ‘view demo’ or even downloading the files will explain in detail how to set the different options up. Plus the fact that the names of the parameters that are used are pretty self explanatory…

How have you set up showcase? if you have it set to be a ‘ViewLine’ then you are correct and it won’t play continuous. As the developer has mentioned above it will be an upcoming feature. As far as I know the others should work fine, although I haven’t tested them all…

I have successfully used it on .Net and it works a treat in both a content managed region and as a dynamic control driven from a database. Check your code again, check your links + script etc and make sure its all referencing correctly. 

This plugin is great, wonderful job, one more quick question:  I’m having an issue with all showcase-content being shown on loading in IE 9.  The page gets long and every div is shown before rendering, is there a way to stop this?  Thanks!

Why is the slider an infinity slider but the thumbnails don’t offer that option? I need looping thumbnails…

Me too, in IE 7 and 8. But the first displayed missplaced. 

 Is there any parameter I could hide caption when clicking the slider with? (Because there are some videos and caption overlaps video controllers)

How can i change slide from another objecton page ?

From 700 change to ”nr%”

Fancybox has nothing to do with the slideshow’s thumbnails. You can activate thumbnails of your slides in the showcase settings list (explained in the package you download). Just edit those parameters to set up the thumbnails you desire (no jQuery knowledge required) :

thumbnails: true,
thumbnails_position: ’outside-last’, /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: ’vertical’, /* vertical/horizontal */
thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */

Just give them a different name (id and class different than default name (”showcase-header” and ”showcase-footer” for example instead of ”showcase” default)) and you can call the settings parameters function with the 2 different names :

$(document).ready(function(){$(”#showcase-header”).awShowcase({
….parameters….
});$(”#showcase-footer”).awShowcase({
….parameters….
});});

Stop developping for IE6… It is a waste of time.

How do you set slider order? I know the subsequent slider posts push the previous ones out but is there a way to set an order or fix it so a slider always stays regardless of subsequent posts.

thanks

Does it support random functionality?

Does it support random functionality?

I am having a hard time trying to change the widths of the showcase-navigation-button (0-9). I need to insert background images behind the numbers 1 through 9. I have been able to insert the images, however I am unable to find the widths, or alter them. I have created the widths using the padding element, however this offsets the position of the dot(the dot that shows which slide is active). I also noticed that these bottom buttons are being populated with the showcase code. My button should look like this one displayed at the bottom. Can anyone help me please?

Thanks guys, this is an awesome plugin! Going to use it in all my development!!!

Got it resolved guys!

Does this slideshow Support HTML5 videos. I had got it to work in IE but not in Chrome / FF ?? 

Under Developer tools in Chrome  it shows Get Instance of the HTML 5 Video and it is pending.  Seems to hang there and it does not start to buffer. I am going to assume there are issues with this slideshow and HTML5 Videos. 

great plugin,
a way to have a scrollbar for the demo 6 ?

 Change the #showcase to #showcase2 on the second one.

how would i implement it into blogger?

Can´t find your wordpress plugin anywhere on the web

The ”how do I link to a specific slide” issue – I tried answering it on the bitbucket page, but the server crashed (or just stopped responding) when I tried to do so.  At any rate, here it is:

Open the .js (non-minified) and find the very last portion:
        // Remove loading class
        showcase.removeClass(‘showcase-load’);
    };

Directly above this, we’re going to create a new function tied to an href id of firstslide (for example – yours can be different.)
                            jQuery(showcase).find(‘#firstslide’)
                            .click(function() {
                                changeContent(0);
                            });

Then, make your link like you normally would:
First slide!

Reproduce as many times as you like for however many slide links you need.  Took me a little bit to figure it out (was needing this function as well) – and just decided to reproduce the changeContent code found under the functions used for the left and right arrows (some of the code stripped and changed, of course.)

Hope this helps.

I cant seem to use any div other than showcase everytime i use other div the slider srew up.what am i missing here?

Is there an easy way to get multiple showcases on one page? Any help would be greatly appreciated.

Exactly what I was wondering as well. I want a couple of different slideshows and having to utitlise two libraries to do this kind of defeats the purpose of using Awkward…

Here’s my guess (untested): duplicate your jquery used to call the showcase:
$(document).ready(function() { $(”#showcase”).awShowcase( {

But call #showcase something else, like this:
$(document).ready(function() { $(”#showcase2″).awShowcase( {

Adjust html for new slider accordingly.

 Edit: I was right.  It was that easy.

I’m wondering if this plugin is free? I would like to use it on my website.

First image not loading in chrome and safari why?

 You can download it, right?…

Yes i can

Hi,

I inserted the plugin on my website but it takes ages to load thumbnails. Am I missing something?

Kind Regards

It is a very nice plugin to use
Actually in the larger images slideshow will be in a cyclic.
But in the thumbnails it is not in cyclic.
Can anyone help me to change the thumbnails also in cyclic.

This is a very nice PlugIn, thank you. I have been looking for a solution with the possibility to insert longer captions (not just in the title-Attribut or something like that) for a long time – so your stuff perfectly suits my needs. I loved that you even shipped the PSDs.
I had some trouble with .swf-Files (they won’t show) but if somone asks: putting the SWF into a seperate HTML-document and an iFrame into the slide works.
So thanks again.

Love this slider, it’s simplicity, and how configurable it is, and not in your face like so many others.

One question I have is: Is it possible to get the order randomised? I’m using this to profile DJs for a radio station, but think it would be great if they were either
a) totally random in order or,
b)Still in sequence, but the first slide was a different one each time?
 

Love this plugin, but is there a way to embed HTML5 video and to make it auto the video and after playback resume slideshow again?

 Sorry I meant autoplay the video*

This is a great plugin! But I can’t work out how to replace the numbers with actual image buttons with different sizes. How would I do this? 

Hi, thanks for making such an amazing plugin!! one small thing… all of the images are loaded at once, making it a bit of a beast for page loading times, how would i go about implementing thumbnail sized images for the thumbnails and have them swap in the large image for the main display – i cant seem to wrap my tiny little mind around it…. thanks again….

 That has to do with your html5 video embedding – you’ll need to figure out the autoplay parameters for the player you’re using.

 Many thanks for your reply, I have managed to embed the video. Is there a way to pause the slider on video playback and resume once playback has ended?

why after click on any arrow or thumbnail the auto function is set to false ? the slider just stops, its a bug?
How can I make the auto function set to true again after any click?
I have :
auto: true and continuous: true, as well? What’s wrong?

Maybe this is a bug.  My solution：
In file  jquery.aw-showcase.js , from line 416 to line 419.
==============================================================
416  if (!pause_loop)
417  {
418 break_loop = false; myInterval = window.setInterval(autoChange, options.interval);
419  }
==============================================================
TO:
==============================================================
416  //if (!pause_loop)
417  //{
418 break_loop = false; myInterval = window.setInterval(autoChange, options.interval);
419  //}
==============================================================

I didn’t check if this may cause other bug.

 i want loop to the top image whan i get last image.
do you have any property or way?

como poner las flechas (arrows) encima de la imagen?

when page is reloded. images wont load

when page is reloded. images wont load

Any advice on how to integrate with WordPress?

does this work with wordpress?

The image size seems to cutoff the rest of the content. In other words, the slide height is rendered without taking the image size into account.

Great plugin…how do I limit the number of posts that show in the slider? At the moment I have around 9 posts (with images) which is taking an age to load.

What CMS are you using and how are you implementing a post?

Nevermind, I just set overflow to ‘visible’ on .showcase-content

Yes, but you need to implement it yourself.

Check the image URL. Is it correct? Use firebug and proceed from there

I’m trying to place the horizontal thumbnail nav container above the slideshow, instead of below it, and no matter if I move the ‘s they still fall below the slider

 Im using wordpress

thanks

how to jump to a specific slideshow div number with a simple ”a href”?

$.awShowcaseChangeContent(XX); //XX number of the slide

I.E. gets the tooltips mouseover and mouseout flipped… any idea how to fix this?

I have an apparent conflict with superfish menu on my site which uses jquery-1.3.2.min.js while this showcase slider uses jquery.min.js.
How can I correct/eliminate this conflict so that both the showcase slider and superfish menu operate properly?

Thanks…..

Hi, gr8 slideshow, really very nice….
How can i add pagination like 3 of 5 something ( number of the slide/ total number of the slide)
Thx alot….

Is there any way to include jquery overlay to work with the showcase? Meaning, if I want to to have a link within one of the slides that opens up an overlay window that has a flowplayer video playing or a youtube video clip.

 Just wanted to update the forum that I found a work-around for the error I was experiencing.

Original Issue: Mousing over hotspots in IE works for a couple times, but if you move mouse fast it will break the code, and the tooltip is then shown after the mouse leaves the hotspot, and hides when the mouse rolls back over the hotspot. Basically flipped. I repeated this bug on my example page, and on the example slider content up top on this page…

Note: There was not an error being generated from IE until I started messing with the animateTooltip() function within the .js file.

Solution:

I created a new function named animateTooltipOff() based on the original function.

function animateTooltipOff(container, x, y, w, h, l, t, content)
        {
            if(tooltip != null){
                // Fade out the tooltip
                tooltip.fadeOut(300);
                // Remove it from the DOM
                tooltip.remove();
                // And set the variable to null
                tooltip = null;
            }
        }

Next I altered the code in the displayAnchors() function so that mouse events are assigned to use the different functions rather than pointing to the same one.

jQuery(this).mouseenter(function()
                    {
                        animateTooltip(container, coords[0], coords[1], coords[2], coords[3], coords[4], coords[5], content);
                    });
                   
                    jQuery(this).mouseleave(function()
                    {
                        animateTooltipOff(container, coords[0], coords[1], coords[2], coords[3], coords[4], coords[5], content);
                    });

Hope this helps if someone else runs into the same issue.

Is there a way to stop the slider when a video is playing then resume when it is complete, without having to hold the mouse over the slider?

Hi i am having a bit of an issue. Im building a site which has 4 seperate instances of AW Showcase and im having an issue where they dont render properliy in IE 9 or less. i have attached a screenshot. please advise if there is a css or js fix i can put in place or if there is something i need to fix in the code.

Thanks, JL Griffin

Is there any way to randomize the slide show???? so that every time someone comes to the site, sees a different image of the slideshow???
And also how can the thumbnail slider can be managed so that there wont be blank thumbnail spaces????i want it like this one…http://coffeescripter.com/code/ad-gallery/ 

Try using the most updated version of jquery ( most likely jquery.min.js in your case).
i.e. Delete the line that links to the jquery-1.3.2.min.js in your html, this should solve that issue.

Same here!

Anyone have a solution?

Don’t know if you resolved this..but here’s what did the trick for me: 
add a display:none to the showcase div: 
 

Then at the bottom of your page add the following JS:

           $(document).ready(function() {    $(”div#showcase”).show();});  

basically just hides the div until the contents load..you can modify it to show a loading gif:

and the JS would be:

           $(document).ready(function() {   $(”div#loader”).hide();         $(”div#showcase”).show(); });  

-Revisedagain.com

check out the solution above

This is a bit beyond my ken, but I’d like to know, theoretically, is it possible to have an image map that would load a different content slider into another div or iframe, then have tooltips that show in the slider each open up a modal dialog box? I have a client with this request and its sort of a deal breaker.

Any thoughts are greatly appreciated. Even a simple ”Yes” or ”No” or ”it would be easy/difficult”… Thank you.

is the any way to change the URl adress like this index.php?p=reg&id=M1 when you click the next and prvious button?

Hi Guys!

I’m having a problem using this slideshow; Its been configured and works fine when i display it on my machine (using localhost) but now that i uploaded the site, the slideshow just does not show. what do I do?… please help!

If you have thumbnails enabled, you can manually call the click event on the .showcase-thumbnail divs. E.g. $(”#showcase #showcase-thumbnail-2″).click();

By far one of the easiest galleries I’ve worked with in my career. Just love it very customisable and user friendly

If we add more than 16 Slides in ‘Viewline’ mode then it’s not working. After 16th images, you can see a black strip then images are not appearing. Any fix for this?

Solved this issue by change the value of content_viewline_width=10000 to content_viewline_width=20000 in jquery.aw-showcase.min.js file.  

Hope it helps.

I wrote these functions so just put them in the jquery.aw-showcase.js file and call the appropriate one in your callback from jwplayer or whatever you are using.

// Custom pause function
jQuery.fn.pauseSlider = function()
{
    break_loop = true;
    clearInterval(myInterval);
};

// Custom start function
jQuery.fn.startSlider = function()
{
    break_loop = false;
    myInterval = window.setInterval(autoChange, options.interval);
};

Here is an example of calling these functions when using jwplayer.

jwplayer(”player”).setup({
            flashplayer: ”application/jwplayer/player.swf”,
            image: image,
            file: video,
            width: 485,
            height: 250,
            bufferlength: 5,
            volume: 100,
            controlbar: ‘over’,
            stretching: ‘fill’,
            events:
            {
                onPlay: function(event)
                {
                    jQuery.fn.pauseSlider();
                    $(‘.showcase-caption’).hide();
                },
                onPause: function(event)
                {
                    jQuery.fn.startSlider();
                    $(‘.showcase-caption’).show();
                },
                onComplete: function(event)
                {
                    jQuery.fn.startSlider();
                    $(‘.showcase-caption’).show();
                }
            }
        });

Hi, is there a way to make the width of the page numbers follow the width of the slider itself? Because when I set the width of the slider to be 990px and the pages exceed 30, it continues to go on horizontally.

WOW! Simply the best. Thank you so much for this. 
My regards

thx

-_-

What about the left and right keys on your keyboard? Does it just effect both of them?

I have exactly the same problem.

This does not work

where is the free plugin to WP?

sorry guys but really i have a problem to generate a loop of the main picture.. anybody have the js file working for this option? thanks a lot

I have 3 images in the slider on the homepage and only in IE9 the slider shows the images vertically, when I go to a couple sub-pages and back to the homepage the slider works fine.

somebody can help me with the loop please?

I’ve noticed that when the width is set to 100%, the slider no longer animates when scrolling to the left. Is there a fix/workaround for this?

Great showcase! I modified it a bit to use only captions (no thumbnails). Is there a way to have the captions fade in, rather than slide/jump vertically as the slides change? Here’s my test page: http://www.madbirdesign.com/nightscape

how to get 100% height of the screen ? so responsive on the height and the width

I’m having two problems with the slider (http://www.madbirdesign.com/nightscape/index.html). With 3 slides, it cycles through OK (on Mac browsers Chrome and Safari), then the thumbnail/caption area is blank for one rotation.

In IE8, the thumbnail/caption area doesn’t change at all.

Any ideas? Thanks!

I have some trouble with the Showcase. I downloaded the 1.1.3 version, and renamed the style.css data to style1.css, because I already had a style.css. So, I copied the content of the index5.html to multiple html documents (I want to use them in another one via Iframe) and renamed the style.css in the head to style1.css. But since I did that (I have all the documents in the right folders) The gallery broke down completely and is useless now. What did I do wrong there? Can anyone help?

Can Showcase Slider be responsive?
Hello, first thanks for the gread plugin! but there is one problem! I can’t makte it responsive (so far). I replaced al the ‘px’ with ‘%’ but that didn’t help. So i did some other things but i can’t make it responsive. It stays a fixed abound (100px, i think from the 100%)If some body knows the awnser; please let me know! qwertiz @ hotmail .com Thank you!

Can Showcase Slider be responsive?Hello, first thanks for the gread plugin! but there is 1 problem! I can’t makte it responsive (so far). I replaced al the ‘px’ with ‘%’ but that didn’t help. So i did some other things but i can’t make it responsive. It stays a fixed abound (100px, i think from the 100%)
If some body knows the awnser; please let me know! qwertiz @ hotmail .com Thank you!

Great plugin, thanks!

I’d like to be able to slide to a specific page from within a navigation bar, is there a way to do that? I’m sorry if this is a simple question, I’m new to Javascript.

Thanks in advance,
Donovan

I could have solved my problem. Thanks to you! 有難う御座います！

Anyone know if there’s a way of implementing a pause button for the plugin? I’d like to set up a way to pause the showcase without mouseover or clicking on a new slide.

Would it be too much to ask for a snippet of how you modified the plugin slightly to initiate fancy box via changeContent?

why did u pick matty and not jake hes awesome

lol she is funny

he just took a pic lol tht funny

lol
akward is awsome

akward is awsome and funny lol

why this girl guest keep cometing

ewww she is making out with jake tht should be jenna and not her he dnt evan need to do tht she should make out with matty not u

lol

well shouldnt be mad

If you have more than one showcase in a page, and you have some problems when displaying the thumbnails, change this line:

jQuery(‘.showcase-thumbnail’).each(function() { thumbnailStretch += getElementWidth(jQuery(this)); });

for this one:

jQuery(‘.showcase-thumbnail’,this).each(function() { thumbnailStretch += getElementWidth(jQuery(this)); });

Hi, for demo no 3, how can I change the thumbnail position to top and the slide at bottom. Please help, thank you.

How I can make the image fit with width 100% in the div?

thanks a lot!

Hello, I’m loving the slider, but weirdly it does not take any of the configuration options I pass in into consideration… Very weird…

my code :

$(”#home-slider”).awShowcase( { content_width: 960, content_height: 200, fit_to_parent: true, auto: true, interval: 3000 });

And I still have a 720px wide div…

Any ideas ?

where is the file to download fu..id… ?

Is there a ‘start_at’ config option? I would like to start the slideshow on a particular slide.

Ok, I dont think it supports it. Patched it though.

fantastic plugin! thanx a lot for sharing it. just a question, I’ve seen others have already asked for without solution: in case of a large amount of slides, is
it possible to have external navigation links that jumps to inner content anchors?

Which file is the correct one to download, i have tried installing a number of the zip. files to wordpress and each time it says the file does not contain a plugin?d

when I go to download bitbucket says there is no files to download
https://bitbucket.org/awkwardgroup/awkward-showcase/downloads

Very nice.

This is a great plugin – very nice and easy to use.

However – i have a question… i want to fill the content of the gallery divs from a javascript. i tried to give the content div an ID and then set the content in a script. i tried both JQuery and ”normal” js but none worked.
Is there a way to do it?

Here is what i tried:

…

$(”div#mediashowcasediv”).html(”this is my media”); // JQuery test

mydiv = document.getElementById(”media1showcasediv”); // ”normal js
mydiv.innerHTML = ”this is inner HTML”;

Thanks, Orit

Hi, I have implemented Awksard Showcase to Drupal 7 (not using the module, but custom Views) and everything looks fine, only the ‘View As One Page’ link is not working. Any idea why? (For now, my website is only local, but will go online soon).

Hi, thanks for this plugin. I’m using it in a Drupal 7 website with Views, and it works, except that I have a issue with the ‘View As One Page’ function, getting this error: ‘undefined’ is not a function (evaluating $(‘#awOnePageButton’)')

Any one could help me to track the bug? Thanks in advance!

How would I go about changing the properties of the showcase-button-wrapper? I’ve added a further method:

.showcase-button-wrapper span.hover
{
background-color: #ebed27;
}

This should then change the background round the text to a yellow color however I can’t see how to tell the plugin to use this? I am also looking at using buttons behind this as well and move the bar into the top right corner of the plugin any ideas on how this could be accomplished?

Thanks!

Great plugin. It’s so easy to configure. I have two questions for you?

1] Many lines of the configuration script is repeated in both ”jquery.aw-showcase.js” and the code in the index page samples. Does one override another? Do I need it in both places? Things like the type of transition, timing, etc… Not sure why it’s duplicated.

2] I placed a youtube embedded video and the transition seems kind of abrupt when sliding or fading to that slide. The easing in of the video is very jumpy. Any thoughts as to what I can do?

Thanks,
Bob

Awesome! Thanks. Fixed it for me (although I used 5 since I have five thumbnails).

I really don’t get it, i’ve installed this into drupal but – how do I get the tooltip to work?
It’s the main raison i realy wont this. Just don’t get how it works…

I usually use Lytebox. With this one you just call initLytebox(); at the end of changeContent function, right before the last } near line 889.
The tooltip link will look something like <a href=”yourlink” rel=”lyteframe” rev=”width:760px;height:690px” coords=”xx,xx”>

Can’t read the comments below, the contrast is too low : white on beige…

Hello, I need your help. can create friendly url for each image?

I would like to use to navigate instead of using thumbnails, numbers or bullets. Someone Help. Please

Thanks in advance

I would like to scroll with the ‘a’ tag instead of numbers, bullets or thumbnails. Struggling though. Someone please help.

Thanks in advance

any ideas how to define more than one one background image (by default appears as plus) for multiple tooltips in jqery ? btw. amazing script

I love this content slider. If it were responsive that would make it FANTASTIC! It’s tough to read the comments in the thread below. The white text on a light background is killing me.

If you assign every tooltip a popup, like lytebox, you may want to enable every tooltip only when the page is full loaded, to avoid the tooltip opening as a regular link. I did this changing jQuery(this).fadeIn(1000) into:

$(window).bind(‘load’, function() {
jQuery(‘.showcase-tooltips a’).fadeIn(1000);
});

Double – sorry

I’m having trouble with your plugin. It’s awesome and I’ve got it properly functioning in my website, but after every 5 or 6 images, the next image often doesn’t appear and the slider continues going through the images, blank image after blank image. Anyone else have this issue and work out a fix? The comments chain is HUMONGOUS!

haschange url can be implemented?

It does. I just placed 2 on the script and 2 on the html. Worked like a charm!

Hello,

Is there a possibility to adjust the slideshow size in percentage and not in pixels ? I want the pictures to automatic resize on the resize of the browser

Is that possible ?

Thank you very much for any help ))

Luka.vertel@gmail.com

seriously this is probably so simple but I can’t figure it out!! How do you slow down the speed (not the transition speed or the delay- but the time between slides?) Increasing the ”delay” messes up the slide effect

I have three slides per page. Is it possible to make buttons (1,2,3) change pages instead of slide? so No.1 = first three, No.2 = second three slides and so on….
Please help.

Very nice Job! excellent and so Easy integration process. So I have an issue that I can’t solve, when I use the tooltips on IE any version, Sometimes when the user roll_over the anchor and move the mose over the DIV that I display then the div disappear and if you move the mouse out of the any anchor the div is display again… that is so weird, it’s like the mouseover behavior is working with some problem, somebody know how to solve that???

Hello Awkward Group. Thanks for your nice Slider. As i like your work, i like to give you some feedback about a bug. If you click very fast on the left or right button – the slider pages in background get stuck. Of course this is due to bad user-input – so it is something cosmetic.

Hi guys, do you have a solution for this problem?

Great work, nice smooth look. One question though – can it be adapted to be responsive ??

RE: HTML 5 video…I sort of figured out a workaround.. in the showcase-content div make a new div inside with an ID like ”videoSection”…then paste your video code on a separate file like video.php or something…then just usethe jQuery load funciton and load it. i added live click for when someone clicks back…youd have to have thumbnails and ID the thumbnail, with the video on it, something like ”vidTrigger”

$(‘#vidTrigger’).live(‘click’, function(){
$(‘#videoSection’).load(‘videos.php’);

})
$(document).ready(function(){

$(‘#videoSection’).load(‘videos.php’);

})

Hi, did you ever figure out how to do this? I’m having the same problem but with Colorbox. It seems that any jQuery won’t work inside of Awkward showcase.

have you tried playing with the value for interval?

totally agree! please change the color theme….

I’m trying to invoke Colorbox from within one of my slides and can’t get Colorbox to work. I also tried a simple pop-up on click with jQuery from within one of the slides and that doesn’t work either. Both work if I move them outside of the showcase containing div. What am I doing wrong?

I absolutely love this plugin. Great work, the demo is impressive.

I’m having some trouble with generating thumbnails and having them link on.click or whatever with the main image.

Does the plugin generate the thumbnails automatically?

All I’m getting is this in the thumbnails div:

:/

Is there a way that javascript is working in the showcase-content? I code a liitle Javascript with click event and animation. It will be work, but If i have two ”Slider” and the second Slide will be shown, and the the first will be shown an second time, my litte javascript code will not work.

Image flickering problem for slow connection…..

Is there a way to make the thumbnails continue to rotate like the main images, or, make the arrow at the end of the list disappear since it stops working at the end?

Alert in IE8, infinite loop detected, but I have same configuration of your demo, and no problem with your demo on IE… help me please

Is there anyway of having a direct URL to a particular slide in the slideshow?

Thank you for the awesomely awkward plugin!

Any chance anyone can help with making the vertical thumbs ‘carousel’ or infinite scroll, instead of sliding back up to the top, like the larger images do?

Thank you in advance for any help!

M

please change the font color of the text on this page.. plz.. The white color is just not readable..!

Hey, great script! Is it possible to slide with your fingers for iPad or iPhone? Would be great!!!

Hello, can someone help me please – in vertical gallery, I’ve managed to round the corners for thumbnails, but how do you round the corners of the main picure? Applying border-radius on .showcase-content only does that for a default picture, it comes back to corners in a instant when going to the next image. Is this an issue somewhere in jQuery or am I doing somethong wrong? Please help and thanks in advance.

We would love to put more work in to maintaining and developing this plugin. The response from the community is over our expectations and we are planning on developing the plugin this summer if we find the time. Touch is absolutely one of the features we will be looking at, as well as responsive width.

This is the best content loader i have seen in days, thank you

Great sllider, but how to remove the numbers of sliders on the bottom and if change the dmiesnions the arrows stays in the same place. How to bring them up or down. p.s I mean where I can find that in code. Thanks

I am using limelight video player in this slider, works perfectly with all the browsers except with IE 8 and 7 version. is there a patch available? Thank you in advance.

Try changing thumbnails_slidex: 0 on thumbnails_slidex:2 . it helped me

i want to set the showcase with loop setting, when the arrow get stuck then back to first thumbnails