Hey,

first I would like to thank you for this great plugin.

I have one question:

Is it possible to hinder the js that every child element gets the display:block property?

Because I tried to set it up with some text content and lists and ever li item got display block.

Thank you,
Matthias

Hi Nathan,

Thanks so much for this great slider...exactly what I was looking for. It works perfect on the first image I've attached it to, but I have two more images that I want to use the slider on with different content on all three. Been trying this, but I only get the content (images) for the first slider and not the others. I saw your reply to someone else's question which was similar, but your reply doesn't seem to solve my issue.

So I have three images (divs) underneath one another in a column on the right-hand side of my one-page portfolio site. The slider that works is the one when the top image is clicked. The slider page comes up as intended with a transparent background (with the home page showing through).

So this is what I have for the first image to work properly:

In the head tag:

In the body tag:

                    <div class="caption" style="bottom:0">
                        <p class="h4"><strong>2010-present: site editing & content management</strong></p>
                  </div>
                </div>
                <div>
                    <img src="js/slides/Selah Management.jpg" width="500" height="329" alt="slide 2"></a>
                    <div class="caption">
                        <p class="h4">2010: site design &amp; development</p>

                  </div>
                </div>
                <div>
                    <img src="js/slides/IRRI.jpg" width="500" height="329" alt="slide 1"></a>

                    <div class="caption" style="bottom:0">
                        <p class="h4">2007-2010: site creation &amp; content management</p>
                  </div>
                </div>
                <div>
                    <img src="js/slides/DC.jpg" width="500" height="329" alt="slide 1"></a>

                    <div class="caption" style="bottom:0">
                        <p class="h4">2007-2010: content management</p>
                  </div>
                </div>
                <div>
                    <img src="js/slides/CRAI.jpg" width="500" height="329" alt="slide 1"></a>

                    <div class="caption" style="bottom:0">
                        <p class="h4">2009-2010: site creation &amp; content management</p>
                  </div>
                </div>
      </div>
            <a href="#" class="prev"><img src="js/slides/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="js/slides/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
    </div>
        <img src="js/slides/example-frame.png" alt="Example Frame" name="frame" width="739" height="341" id="frame">

<div class="print design"></div>    
<!--The overlay and message box-->

 

If you need my CSS as well, let me know.

If you could give me a hint on how to make this work that would be great! I'm pretty new to jquery as you might have guessed!!

Thanks,
Karin

I have black dots showing next to the pagination. any idea where that is coming from?

http://www.madelineconn.com/temp/

thanks!

Having an issue with blank slides appearing when I attempt to implement on the homepage of my test site. The first thing I did was change the pictures around in your Standard example, just to make sure things worked on my end, which they did:

http://www.baseballcouchcoach.com/slidejs/examples/Standard/

Now, when attempting to port over the exact same code to my homepage, blank slides appear:

http://www.baseballcouchcoach.com/

Hey there. I know this is created via the slides.jquery.js file. I wanted to try to resize this via @media for mobile, but can't seem to do that. I just need to alter the width and height of this.

What is this used for specifically? Thanks again. Here's the link.

fromdavy.com/FD2011

Hello, I have a page in a cms system. There an iframe with a link to a page with mij slides.
But it's not working correct: I get 1 good slide, 1 blanc slide, 1 good slide etc.

When I load the seperate page (not in an iframe) it works well.

This is all in IE 9. Firefox works fine.

Does someone know how I can fix this?

Is there a method to link to a specific slide? ex: URL address to open slide #3.

I do like the default slide option but this would allow us to direct different users to different slides.

Thanks.

Hello Nathan,

Thanks for sharing this great slider! Two quick questions.

1. How to remove unwanted circle links? (eg. three circle links are wanted not five)
2. Can multiple sliders run on the same page? (same slider; different content)

Thanks much,

Dan

So here is my goal. Have you ever been to the hulu site, if not www.hulu.com on the front page the have a flash slider that will slide all the way across the page no matter the width. I dediced to use your slider and my only problem I am seeming to have is centering the image. It wants to be all the way on the left side of the page and ideas on how to correct this.

Hi; I'm trying to get your plugin to work on blogspot (http://grospiton2.blogspot.com/). So far, so good, except for the pagination buttons below the slides. I can't get it to work properly. Apparently it is a problem with the CSS. Can you visit the site and make any suggestions? Thank you in advance.

We're running a clean version of Studiopress Genesis and the Lifestyle Child Theme.
We've created a function to use slides.js to create a content slider.
jQuery is enqueued in our custom function.
We enqueue the version from the Google library, not the one included in WP.

It works superbly until we activate wp-ecommerce and then the slide function just 'stops'. Our slides are not hidden and just 'stack' on top of each other.

Other jQuery functions (like shadowbox.js) still work.

I've checked the header for the site, and there is only one version of jQuery being loaded.

If we disable wp-e-commerce it all works. We've tested and disabled all other plugins - so that there was only wp-e-commerce and our custom function and the problem still exists.

I now seem to have issues with descriptions/titles not showing in IE6, IE7 and IE9 beta...only shows in IE8.

I am having trouble when I use the "Images with Titles" version of Slides in IE7. I get the error: "'attr(...)' is null or not an object". If it helps, the error was reported on line 32, character 908 and only occurs when I click through the pagination of the site. Also, the pagination in IE6 and IE7 does not show the current slide (green dot). Any help would be greatly appreciated.

Looks awesome!

Do you plan to add any support for titles and/or descriptions?

Thx

I'm testing this to see if it could for my company.
on mozilla - things seem to work fine.

IE - tons of errors.

http://dev1.web.lucy.demandware.net/Home%20Page/WELCOME_PAGE,default,pg.html

any idea? our site is based on demandware's ecommerce platform.

I have installed slidesjs and it works well however I have a son of suckerfish menu above it and when the slide is in action the menu dropdowns hide behind it. I have tried increasing the z-index of the menu and decreasing the slider but it doesn't seem to work.

Any ideas?
Thanks

See sample here: http://zuri.melbourneweb.com.au/

It would be awesome if you can add support for HTML tags inside slides. Any plans with that?

Hi Nathan. Great job. :)

I'm trying to implement 3 sliders on the same page.

It's working fine aside from the prev/next links, which I can't for the life of me get to work for each separate instance.

Seen here:
http://alexanderjam.es/2/portfolio

It's a work in progress so likely to be fiddled with in the meantime. :)

I know it's beyond the call of duty, but then again all of this is really.

Any tips would be much obliged! Sure I'm missing something simple. :/

Thanks again,

aj

Is it possible to add image description to the slider?
Cool plugin by the way

Hello,

I'm making a site and I wanted a great image carousel so I decided to try Slides. Currently my implementation works great for most browsers (Chrome, FF, IE8) but for IE7 however the images are 50% of the total width to the right. My images are 960 pixels wide so in IE7 they are 480 pixels to the right.

When I take just the html + css required for the slider I have no problems in IE7 but I just can't find where the problems with IE7 in my styling arise.

I already tried to position images in IE7 -480px to the left but that causes some kind of "lag" when sliding, which doesn't look nice at all. This problem can also be seen in IE8 with compatibility mode enabled.

I don't really know how to analyse this problem as IE has no Firebog or Chrome developer tools. Can anyone help me with this problem? A live example of what I mean can be seen over at: www.ombouwnoord.nl

Thanks in advance!

Yours,
Jan T.

Hi,
The "current" variable mentioned on slidejs.com in the explanation for animationComplete keeps being returned undefined. I'm trying to use this event to ajax-load content into the slide (good/bad idea?). I tried adding it to one of the included examples, still no luck:

<script>
    $(function(){
        $('#products').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            effect: 'slide, fade',
            crossfade: true,
            slideSpeed: 200,
            fadeSpeed: 500,
            generateNextPrev: true,
            generatePagination: false,
            animationComplete: function(current) {
            console.log(current);
            }
        });
    });
</script>

Nathan,

Absolutely amazing app you've created, thanks for sharing!

I've been able to adjust the size to fit my layout, but in doing so I seem to have broken the positioning of the pagination buttons. I hate to bother you, but do are you able to quickly determine my mistake?

http://www.brianrhea.com/scwd/

I recognize the problem may be my own and not Slides, so my apologies in advance for the bother.

Great work!

Hi again!

I'm still having a problem with the captions not showing in IE7 (IE8 is fine). I also just noticed that the pagination indicator is not showing in Safari.

Any thoughts? I need to go live with my site this weekend, and I hope to resolve this.

Thanks,
Karin

Think we can pass in the current var into these two callbacks: animationComplete, animationStart?

Might make sense to only pass it into animationComplete because the slides are done transitioning. What do you all think? Is there another way to get the current slide's index in those functions? Maybe give us access like this.getCurrent() or this.current?

Hi Nathan

Implementing this in a new WooTheme, and I see that the autoheight isn't working if I enable crossfade.

Is it a limitation or a bug?

The slideshow we're working on has a div with an image and some text inside of it (some of which have links). Is there a way to have the image itself auto-advance the slideshow (like bigTarget) without it affecting the whole slide (so the links in the text can take users to the desired location vs. auto-advancing)?

I was thinking the product example in your download has the answer, but I can't figure it out. Any help or suggestions would be awesome.

Hi!
I found a strange problem. If the Slides is created within a element which has a parent that has the css-attribute display:none the "sliding" doesnt work when display:none is removed.

Error:

Bit of a weird bug this, can't work out if it's me or the slider that's getting it wrong. I'm using divs with text in, with a different background image on each individual slide, giving each slide div an ID and setting the background images in CSS.

Slider looks fine in Firefox, but Chrome adds about 10px of empty space above the slider. Have traced it back to the overflow on .slides_container. Disabling it in the Chrome Developer tool puts everything in the right position, but obviously messes up the transition.

Removing the dimensions on .slides_container and just setting them on .slides_container div fixes it, but reduces the width of the slider to about a third of what it should be.

Tried hacking a fix using margin-top: -10px; on .slides_container, doesn't fix it either. Just pulls the background image up underneath the empty space.

This is tested locally so I can't provide an example right now, will try and get it online if this isn't something that's already known about and needs fixing (or I don't suddenly realise that it's my own fault!)

Using the slides plugin but my slides actually have a png image in it, the png fix i'm using does not get applied, anyone encounter this before?

Hey there, love the plugin. I'm hoping i can use it for a project i'm on, but i need to show the captions outside the main slider container (e.g. in a sidebar). Are there any easy methods to do this? CSS alone won't work because of the necessary overflow:hidden, and using callbacks won't guarantee that the captions are synced with their appropriate parent image.

Any ideas, or should i move on to another plugin altogether?

I tested the new Slider. Worked fine with Chrome and FF. I have an issue with the pagination on IE. See bottom of the page http://www.talkahead.com/he/test.html
Any idea what's causing the issue.
Also, is there a way to add a play/pause button next to the pagination.
Thanks

Hi,

Very nice slider but I was wondering if you can use the jQuery easing plugin with this?

Thanks,

Hi, I need to know how to figure out how to capture a picture parameter of the javascript is shown elsewhere on the page to effect referenced to a database, the idea is that the slide shows photos and each photo will have an id or name comes from the database, based on that make a query and list the comments of each photo in the slide below DIV
Thanks

hi, does anyone now how can i zoom images to lighbox zoom images? thanks

http://5oranges.com/

I have a big thread with ur great slides, you should see the featured posts with "read more" letters within... Unfortunately, those images just won't slide at all. Are there any mistake from my implementation?

My implemenation in header.php

Hi Nathen,

For some reason I can't Slides to slide the images. I tried it first locally and it did work but now it is in place on the server nothing is happening. Also the pagination is not showing on the page.
URL is http://fattoad.co.uk/about/
Thanks for your time.

David

I'm trying to add a ul with the pagination class to the top of the slides as well as have one at the bottom. One limitation I found is that your selector on: https://github.com/nathansearles/Slides/blob/master/source/slides.jquery.js#L199 and https://github.com/nathansearles/Slides/blob/master/source/slides.jquery.js#L418 only will return one element because of the eq(). I think we should leverage the rel attribute:

$('.' + option.paginationClass + ' li a[rel="'+ next +'"]', elem).parent().addClass('current');

Hey!
Was just wondering how you could get the captions to slide in from the right/left side rather than from the bottom.

Thanks,
L.

Hey Nathan,

I'm wondering how autoHeight works with container size. What I'm doing is loading multiple slideshows on a single page in my portfolio. The width is constant (700px) and the height changes per slideshow (not per slide—usually around 400px). As it stands, it seems I have to set a constant width for the container in the CSS to get the plugin to work. Meaning that I can't have a variable size.

Wouldn't it be more useful to have the container be dynamically set using the height of the biggest image in the slideshow, the way the control is?

I've looked into the code and tried changing things around, but not got it working. I've noticed that although control looks to be getting its height set dynamically by using children().outerHeight(), its not working and instead getting set to 0.

I'll probably keep trying, but any help or thoughts would be appreciated.

Thanks.

Is it possible to show a specific slide base on the url?
For example. http://www.example.com/#2

It would then show slide #2 on page load.

Hi,

I only registered to ask this.

You use a fixed width for .pagination to center the bullets in your demos. With fixed width you can use margin: 0px auto to center .pagination with floating li's.

BUT

isn't slides all about flexibility? Isn't there a better way than width written down in CSS?

Right now, each time you add or delete an image, the width setting has to be adjusted to center pagination. I feel this misses the point.

Without a width setting, you wouldn't use float:left, i guess, because centering the floating elements is only possible with dirty hacks.

I tried to fix this with using no floats, but wasn't successful.

Can you present a cross-browser alternative where you do not have to change the width setting in CSS all the time?

Thank you so much!

Cheers, M

I tried this script in WordPress but it doesn't seem to work.

The title says it all. In IE at each transition there is a sound, which is really anoying.

I'm talking about something similar to what I have @ http://www.katarzynamucha.pl/agh-lipsk - a pager that changes the slide (and I'd like Slides to handle that side) + an enlargement (a different image, to be precise) when the user clicks on a slide.
How would I do that?

Looks like the word "option" was cut to "o" on line 94. And seems to be throwing me an error.

Hi

thanks for this great slider. I wonder if it is possible to slide after loading automaticly to a certain image. Like the gallerie on the New York Times Style Magazine does (http://www.nytimes.com/pages/t-magazine/index.html). Is this possible?

thanks for your info

best regards
thomas

If you view the slider in IE and you turn Random option to true,

The first slide you have set will appear "blink" for a =brief moment then it randoms to another slide.

Doesn't blink on Firefox.

any thoughts?

i need to change the size of the images. I'm not sure where to start.
And i would like to have the dots on top of the images. is that possible?

Hi,

I've got both portrait and landscape images in my slideshow, and they need to be positioned to the bottom right of the div. Here's the HTML and CSS for it:

        <div id="gallery"> 
                <div class="slides_container">
                    <img src="galleries/cultural/A.jpg" width="450" height="300" />
                    <img src="galleries/cultural/C.jpg" width="450" height="300" />
                    <img src="galleries/cultural/cc.jpg" width="300" height="450" />
                </div><!--closes slides container-->
                <div id="buttons">
                    <a href="#" class="prev">&lt;&lt; Previous</a> |
                    <a href="#" class="next">Next &gt;&gt;</a>
                </div><!--closes buttons-->
      </div><!--closes gallery-->

gallery {

width: 450px;
height: 500px;
float: right;
margin-top: 30px;
position: relative;
z-index:100;

}

.slides_container {
width: 450px;
height: 450px;
overflow: hidden;
position: relative;
margin-bottom: 25px;
text-align: right;
}

.slides_container img {
position: absolute;
bottom: 0;
right: 0;
}

However, this doesn't work. I also tried text-align:right on #gallery and #slides_container, and float:right on the img, but neither of these helped at all either.

When inspecting the code with Chrome developer tools, I could see that the images were getting top: 0 from somewhere - and I think I found it in slides.min.jquery.js, on line 22:

control.children().css({position:'absolute',top:0,left:width,zIndex:0,display:'none'})

I have tried altering these values - changing left:width to right:width pushes the portrait images over to the right as they should be, but changing top:0 to bottom:0 doesn't push the landscape images down to the bottom, and causes the bottom of the portraits to go up to where the bottom of the landscapes sit, cutting off the top of them.

How can get them to sit at the bottom?

Thanks for your time.