conflicting jQuery / Javascript with Galleria - javascript

Basically, it is quite hard to explain but I have two Imageslider's that are using the same code? However the first one work's perfect, the second one is displaying a list of images, I figured this might be to do with a DIV ID? Or something that only allows you to use it once...
I am new to this and the problems can be found at this link:
www.steveatattooartist.com
Basically when you click 'sketchbook' the images are all over the place, but when you use Tattoo's they are all perfect.
I am using exactly the same code, why is that a problem? :?
Any help is help, or if you can't help direction usually is a big helping hand!

looks like the main problem you're going to have is lack of uniqueness in your id's. change the id="gallery" to class="gallery" and change the javascript to look at $('.gallery').
jQuery expects id uniqueness and will only select the first element with a given id.

Related

Jquery ticker not working

I don't know why I've had a few issues explaining this problem so I have created this image to show what I am trying to do.
I have a ticker and I'm simply trying to duplicate it below the existing one with a different list. the black tile bar just represents a break so don't worry about styling. I hope this is possible, if not I would also like to know why.
Many Many thanks, attached is a JSfiddle if it is possible to show a working example in the JSfiddle it would be even nicer :)

jQuery | Can I Run Speceific Code Based On What An Images Average Color Is?

I have had trouble finding any examples of this so I thought Id ask here hoping to get a better idea on whether this is possible or not. What I want to do is have images being dynamically grabbed from a feed. Based on the images' average color is (or even better what color the image would look like if it were only a few pixals big) run a specific code that puts that images somewhere in a picture that will be built out by these images that are pulled. Would I need jQuery for this or the canvas tag maybe?
Any help or insight on how I could begin to make this possible would be excellent!
Thanks :)
This seems like a good solution for you, it gets the predominant color in a image, so from that you could execute your code.
https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

How can I successfully loop through an array of classes in JQuery?

I'm trying to pass an array of classes holding a comment each into a function that will display all the comments in a list. The purpose of the function is to make the list drop down down with an animated feel to it. Slightly different to use .slideDown and very similar to google+'s way of showing all comments of a post.
Here is a JSFiddle link from one of my other questions. This what I'm trying to do:
http://jsfiddle.net/MZzUr/9/
Here is my attempt to do the same thing but using an array of classes holding the comments instead of a for loop:
http://jsfiddle.net/A9WLc/4/
Don't intend to give up on this.. been at it for days now.
Thanks in advance.
Kind regards
I think I know what you are going for. This isn't exactly it but it might be useful: http://jsfiddle.net/xkfqN/19/
I have tried to recreate how google does their animation for a social network I worked on but gave up and just went with the way facebook does it...it just pops :) I don't know what kind of voodoo magic google does but it is really hard to replicate.
When you use items[0] it returns the DOM node, not a jQuery object. It is equivalent of using .get(index). You want to use .eq(index) which returns the jQuery object.
var myItem = items.eq(0);
var height = myItem.height();
myItem.hide();

Need suggestions on Javascript for image rollover with text change in <div>

I'm trying to write a javascript that will do two things. First when you roll over a thumbnail of a picture it loads the larger view in a div container. That part works. But the other thing is that there is a description that goes with each picture that needs to load in a different div container. So far I get the one description loaded and then it gets stuck and the next won't load. I think I just need a little push with the type of objects and methods and such to use. I'm obviously not an experienced javascripter.
Thanks in advance for any suggestions you can offer
Sue B.
Perfect case for jQuery...
Try this... http://jsfiddle.net/jchandra/dY8Dp/
Basically I'm adding a data- attribute to store the real pic URL and reusing the title tag for the description.
If you insist on pure JavaScript, it's a bit ugly, but ... here it is...
http://jsfiddle.net/jchandra/aDe3u/

How to create an endless picture-show without marquee?

I wrote a module for Joomla! 1.5 which shows the pictures (banners) with the most clicks. Now I want to show this list scrolling on the home-site. With "marquee" there is a break after the last picture.
I've found an advice which said I'll have to create a div-container with overflow: hidden and a second div with javascripte which changes the positions of the pictures.
Can anyone help me to write this code, because I don't get javascripte?
There are plenty of free ones you can get that are already written for you.
Try one of these jquery scripts to do what you are looking for...
http://plugins.jquery.com/project/Plugins/category/48
The best way to implement such feature is looking to this great JQuery Video tutorial and you will have a great product :)
URL: JQuery Spy effect
MOV: Jquery Spy effect
Hope that is exactly what you are looking for.

Categories

Resources