jQuery Spacegallery plugin

[midrange]

Has anyone used and modified this?

I'm trying to create a mouseover function on the images using something like this:

$(function() {
    $("img.one").mouseover(function() {
	   $("div#one-desc").css('display', 'block');
    });
});

but the problem is that the anchor tag that the js creates to click through the images is absolutely positioned over the images so the mouseover function doesn't get called.

Not sure if there's a way around this.

 

[midrange]

**** it, I'll just stick up a picture of a half-naked broad instead.

 

[Raithlin]

That's a nice plugin. Why don't you just set it to animate automagically?

Hmm - running the demo alongside Firebug shows me what you're on about. No way you can implement a hover without rewriting part of the plugin, AFAICS.

EDIT: It adds the anchor tag around the element you give it. If you could change your version of the plugin to work on the child tags only, then you could bind the hover event much the same way the plugin binds to the click event. Good luck with that.

Or you could just stick a half-naked broad up.

 

[murraybiscuit]

save some time by using the jquery hover() and show() / hide() / toggle() functions.
my suggestion would be to add the interactivity to the <a> element rather than the image itself, and just use css to make the <a> tag roughly the same size as the gallery.
or you could add a callback on the after() trigger as defined in their api.
or you could hack the plugin, look for instances of $('.spacegallery a') and replace it with $('.spacegallery img:last') and add your hover interactivity to that chain and remove the ap <a> from the constructor / init function.

 

[midrange]

In typically lazy fashion I didn't read all the documentation.

Thought for a wee bit this may be the answer

after function Callback function triggered after going to the next image

but how will I pass a class/id of the image to the function that will allow me to display the correct div?

 

[midrange]

EDIT: It adds the anchor tag around the element you give it. If you could change your version of the plugin to work on the child tags only, then you could bind the hover event much the same way the plugin binds to the click event. Good luck with that.

or you could hack the plugin, look for instances of $('.spacegallery a') and replace it with $('.spacegallery img:last') and add your hover interactivity to that chain.

Thanks you two, I'll look into it tomorrow. Just back from a late lunch where I threw down a couple of Savannas.

*searches for half-naked broads*

 

[murraybiscuit]

In typically lazy fashion I didn't read all the documentation.

Thought for a wee bit this may be the answer

but how will I pass a class/id of the image to the function that will allow me to display the correct div?

set up an array which corresponds to the image order and just increment that / reset to zero once you reach the end.
you don't have to know which image you're on, as long as the array mirrors the image set.

 

[midrange]

My inelegant solution:

I have several divs like:

<div id="description1" class="description">
<div id="description2" class="description">

These are hidden in the css, except the first.

Then I've modified the plugin and set a counter to 1.

In the plugin's next function I've added this

if(clickCount == 4) clickCount = 0;

clickCount++;

divToShow = 'description' + clickCount;

$('.description').hide();
$('#' + divToShow).fadeIn('slow');

Not great but will do for now.

Edit: Sometimes a click doesn't scroll the images, but it does increment the counter so the divs display out of synch.

 

[peanutville]

Hi Midrange,

did you manage to get the space gallery running? The instructions state

"Invocation code - Prepare a block level element with some images inside. All you have to do is to select the elements in a jQuery way and call the plugin."

Not too hot with JS, so how would you get this to load, please define "call the plugin"
I understand what it implies, but my research has drawn blanks on how to get it to run unfortunately.

thanx

 

[midrange]

Hi peanut, I did get it running and displaying different divs using a callback function. I have to be off now, will help you tomorrow.

 

[midrange]

Peanut,

in your head tags:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#myGallery').spacegallery();
       });
</script>

then in your body:

<div id="myGallery" class="spacegallery">
    	<img src="images/portfolio/1.jpg" width="280" height="210" alt="" />
    	<img src="images/portfolio/2.jpg" width="280" height="210" alt="" />
    	<img src="images/portfolio/3.jpg" width="280" height="210" alt="" />
    	<img src="images/portfolio/4.jpg" width="280" height="210" alt="" />
</div>

Then you'll need the css from the plugin's site.

 

[peanutville]

Ok that's pretty straight forward & similar to other JS galleries - thank you for making the effort for the reply. Will implement the gallery in the week

 

[silkhood]

hy,

I also work with spacegallery, well I try to work with it. My problem is that, I want to let it run automatically which doesn't work. I successfully changed the 'click' action so that the image according to the thumb is loaded in a div beside. But the thumbs won't change automatically.

I am thankful for every hint.
silkhood

 

[midrange]

silkhood, you may have to use a timer plugin and call the gallery's "next" method every x seconds. I'll look at implementing this when I've some time.

 

[silkhood]

Thanks for your reply. I was down the last days, so I could not try it earlier. Something like the timer-plugin was my suggestion too. I tried using setInterval, but for any reason I can't access or adress the next() function in the right way. Unfortunately I'm not a jquery crack, so if someone can help me solve this promblem I would be very glad.

Thanks
silkhood

Ok, now I use this solution:
at the init function I changed this
.bind('change', EYE.spacegallery.next);

and in my template I have this code:
var change = window.setInterval("weiter()", 2500);
function weiter()
{
$('#myGallery a[href=#]').change();
}
it's not exactly what I wanted but it works.

 

[sansaint]

Hey did you get it right?

Thanks for your reply. I was down the last days, so I could not try it earlier. Something like the timer-plugin was my suggestion too. I tried using setInterval, but for any reason I can't access or adress the next() function in the right way. Unfortunately I'm not a jquery crack, so if someone can help me solve this promblem I would be very glad.

Thanks
silkhood

Ok, now I use this solution:
at the init function I changed this
.bind('change', EYE.spacegallery.next);

and in my template I have this code:
var change = window.setInterval("weiter()", 2500);
function weiter()
{
$('#myGallery a[href=#]').change();
}
it's not exactly what I wanted but it works.

Hi silk! Im looking forward for a way of changing the images automatically too. Have you achieved something yet?