JS sliding gallery
- Started
- Last post
- 13 Responses
- ismith
Alright I need a little help here since I've been mucking around with all the wrong things for too long already... This is what I want to do:
http://www.bourakis.com.au/galle…
It's a shitty example but it's all I found since I can't remember any good examples. Things I want to do differently from that live example though is 1) I don't want the overflow hidden, i.e. I want the images to simply run off the side of the page and 2) I'd also like to lower the opacity for images not in the main view.
I know this should be easy, and I've got jquery, but I'd really appreciate some help while I'm still sane enough to understand it.
- orrinward0
The sliding part I'd say should be easy. Create a div that is as wide as all the sideways content, with seperate divs inside it that are smaller than the width of the container (so the image to the left and right become visible on screen). Give each of theses divs an id, then use jQuery animate() functions to sidescroll the content along to each anchor.
Google 'jQuery image carousel' and break apart one of the multitude of tutorials/demos available.
- ukit0
So ismith you could take an example like this (not sure if this is the ultimate best example, but it works):
http://gadgetinspiration.com/blo…
And in terms of this example, find the CSS style for the "slider-runner" div and delete the lines that set the overflow-x and overflow-y to hidden. Then you should be able to see all the images.
In terms of lowering the opacity of images that are not in the main view, you could set all the images to a low opacity by default in the CSS. Then, on the buttons that toggle through the slideshow, add a function or a line of code that first resets them all to low opacity, then fades the selected image to full opacity.
- How would I go about "adding a function... uh...etc" to change the opacity? :Pismith
- Take a look here: http://api.jquery.co…ukit
- Ohhhhh so that's what was meant by "easing"... I can "ease" individual CSS properties through the animation...ismith
- animation's duration...ismith
- Welcome to the wonderful world of JQuery:)ukit
- ismith0
Okay well I set it up with jCarousel Lite and it works except for one thing: it fucks with my CSS. As in, completely disregards it practically. I dug into the js file and found a few things I could change but no matter how many different places I changed the overflow settings it wouldn't give.
After giving a quick look, does this seem like a better option: http://developer.yahoo.com/yui/c… ? I'm using this on large images (900x500 approx) and it was lagging– this seems to have a number of loading options. *sigh I'm really shit at this
- ukit0
Can you upload an example of what you've got with JCarousel? Should be easy to fix.
- ismith0
Okay really quick– how do I make this work for each element? It's fucking up with multiple elements and I'm not sure where/how to tell it to apply to each element.
jQuery.fn.valign = function() {
$(this)
.wrapInner('<div class="valign-box"></div>')
.css("position", "relative");xH = $(this).children('.valign-box...
$(this).children('.valign-box')
.css({
"position" : "absolute",
"height" : xH,
"top" : "50%",
"margin-top" : 0-(xH/2)
});
};
- ismith0
Okay here is the code: http://www.friendpaste.com/12G0N…
Now how can I make it apply to each element?
- I'm using this code and not a few other vAlign plugins because they all fuck it up worse...ismith
- Probably because it's being applied to elements that are being fucked with by the carousel... SON OF Aismith
- I'll be back on this tomorrow night I guess... grumble grumble. I'd appreciate some help with this bit though.ismith
- Thanks so far ukit (& orrinward!)ismith
- Actually maybe I should just redo the carousel with just animate(), hmmm... regardlessismith
- ismith0
BUMP
http://ianclarksmith.com/csar/ta…
I have a couple problems that I can't seem to solve...
1) I can't find a way to set the opacity only for images outside of #viewer
2) Vertical align isn't applying to each element– it's running the first and then passing the same setting to all the other
3) The height of each thing is all messed up on each one (see all the excess white background). Again' it's taking it's cue from the first image then applying it to all. I'm sure there's a reason and that it's my fault, but I can't for the life of me find a way to correct it. I should note that if you look at the CSS and wonder what all the stuff like .item, .zone, etc are for it's because the front page is a custom stacked grid and simply floating stuff didn't work.
And sorry about the large images– I'll get around to optimizing them later I guess (though if anyone knows of how I can load them with JS after the page is loaded, that would be great!).
- ismith0
Bumping again. Same link as above. Skipping problems 1 & 2. What can I do to get the height of each element right? I'm positive it's CSS (not conflicting with any JS) I just can't figure out what. BTW use your mousewheel to scroll through the images– I didn't add any buttons yet. You can view all the files linked to the page. Any help would be so so so greatly appreciated...
- I wish I could get vAlign to work but it's just been awful, buggy, and all the support is old...ismith
- acescence0
the js is applying inline styles to all of your li's, you'd need to edit the plugin to fix that i'd imagine...
<li style=" float: left; width: 900px; height: 529px; ">
- nope, the plugin is applying a float to each li. I specified width/height for each img tag as well, but doing it for each individual li would take forever for the whole thingismith
- li would take forever for the whole site and would have to factor in any captions etc...ismith
- the js plugin is here: http://ianclarksmith… just search 'float'ismith
- that's how it came btw– I did try to edit it before to inline (the opposite of what you said :P) to try but it failed worseismith
- ismith0
QBN is dying right now and nothing will load but hopefully this will broadcast...
http://www.friendpaste.com/40Ojo… that is my markup
When I look at jcarousellite.js I can see that it wants to set a width and height to each <li>... but EACH one– it doesn't seem to be causing any problems with the width.
- acescence0
in safari or chrome, right click and select "inspect element" and you'll see the generated html. or firebug. makes this stuff a lot easier.
try commenting out line 247 in the carousel script:
li.css({width: li.width(), height: li.height()});
- THANK YOU haha oh man... I'm just going to go sit in the corner for a bit...ismith
- ismith0
The only issue left is in Safari (seems OK in FF) is if you load the page, hover over one of the grey boxes near the top (that general area; above #viewer), and scroll left/right/up/down for a few seconds the whole page jumps to the end of the carousel. Any ideas for clearing this up just in Safari?