Jump to content
Killersites Forums

Jquery Galleria Help


Recommended Posts

Hi there, I am new to the forum and I am pretty new to javascript as well, I am interested in learning and am working on increasing my javascript knowledge. But as of right now, it is very limited.

 

I am using jquery and galleria that I found on this site:

http://www.monc.se/kitchen/146/galleria-a-javascript-image-gallery.

 

I wanted to make a galleria, and I have made and have customized it to my liking as far as placement and colors and everything css is concerned. The only thing I am lacking is that I would like to have the main Image change to another image upon rollover and change back on rollout. everywhere I look for answers I find people talking about making the gallery switch upon rollover of the thumbnail, but this is not what i want.

 

To clarify:

 

I have a gallery, you click on the thumbnail and the full picture loads, you mouse over the picture(pic1.jpg) and another picture(pic1-alt.jpg) displays. To help understand, it would be for a before and after type purpose. click thumbnail for before, rollover for after, rollout for before again, click new thumbnail for new before.

 

I am basically using their demo's code, so if you could show how to change it, it would be greatly appreciated and hopefully I can someday learn to make these type of changes for myself.

 

Thanks,

-Kerry

Link to post
Share on other sites

I don't have the time to write the actual code for this, but here's how I'd go about it...

 

-- use jquery hover (http://api.jquery.com/hover/) to control the image switch

-- when the mouse is placed over an image with a class of "replaced", the script would get the src value of the image and add "-alt" to it, and then update the image to show the hover effect

-- when the mouse leaves the image, the hover image disappears and the regular image reappears.

 

It should be possible (and hopefully relatively simple to do) -- I'll see if I can figure out code for it tomorrow.

Link to post
Share on other sites

Hi there, I visited your site and it looks really nice, I would love to be able to do work like that =). I took a look at the site for jquery hover and I am having a very hard time wrapping my head around how to incorporate it with galleria. I am not very familiar with javascript so I am having a hard time understanding galleria and how to apply the jquery hover to it.

 

Would you have a link to any sites that would help me learn more about jquery and its usage? I would love to learn more and be able to use these features without needing to know how to write javascript.

 

Thanks,

-Kerry

Link to post
Share on other sites

I'll see if I can come up with some working code for this later today.

 

As far as learning jquery, you might want to take a look at:

http://jqueryfordesigners.com/

http://blog.themefor...s-video-series/ (free)

http://killerjavascr...ginners-jquery/ (paid)

 

Do be aware though -- jquery doesn't necessarily mean you don't write Javascript, and being familiar with javascript/general programming practices does come in handy.

Link to post
Share on other sites

OK, this was slightly tricker than I expected, but I got it working. I'm not hugely experienced with jquery, so perhaps there is a "better" way to do this, but it works and that's the main thing. ;) Take a look at the attached .zip file, which includes all the files.

 

The most important part are these two bits:

 

This includes a jquery plugin called livequery (http://docs.jquery.com/Plugins/livequery). Basically, it allows you to bind effects to elements created using jquery after the page is fully loaded.

<script type="text/javascript" src="livequery.js"></script>

 

Secondly, in the <head> of your document (or in an external js file) you need to initialize livequery like so:

<script type="text/javascript"> 
		jQuery(function($) { 
			$('ul.gallery').galleria(); 

	// initialize livequery
			$('[b]img.replaced[/b]').livequery(
				function() { 
					var t = $(this);
					var src1 = t.attr('src'); // initial src
					var newSrc = src1.substring(src1.lastIndexOf('/'), src1.lastIndexOf('.')); // let's get file name without extension

		 	// use the helper function hover to bind a mouseover and mouseout event 
					$(this).hover(function() { 
		 	$(this).attr('src', newSrc+ '[b]-alt[/b].' + /[^.]+$/.exec(src1)); //last part is for extension 
		 	}, function() { 
		 	$(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-alt' from the name
		 	}); 
				}, 
				function() { 
		 	// unbind the mouseover and mouseout events 
		 	$(this).unbind('mouseover').unbind('mouseout'); 
				}); 
		}); 

	</script>

 

Basically, this looks for all images with the .replaced class (img.replaced) and when hovered over, changes the src of the image to add "-alt". So, if you hover over an image called "image.jpg" it will change to "image-alt.jpg", and then change back when the mouse leaves the image.

 

Source for the image rollover comes primarily from http://stackoverflow...ce-using-jquery

 

Hope this helps. If you have any questions let me know.

hover.zip

Link to post
Share on other sites

 

 

Hey Falken, I really appreciate your help, I have gotten the gallery working the way I want using your script.

 

I had to do some customizing to your script to get it to work for me, and I'm sure there is a better way. Take a look:

 

 




     $(this).attr('src',         'images/gallery'+          newSrc+ '[b]-alt[/b].' + /[^.]+$/.exec(src1)); //last part is for extension 

     $(this).attr('src',         'images/gallery'+          newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-alt' from the name

 

I had to tell the new script what the path was for the images since they're not in the root like your example was. The original images are using the same path, so I know there is a way to make it right. I don't want to sound like I'm being picky or anything, I'm just trying to use it as a learning experience.

 

Also, how would I go about making the alt images preload like the originals?

Link to post
Share on other sites

#1 - Path issue:

I believe the regular expression that changes the image gets the file name by capturing the text between the last "/" and the period that starts the file extension. Your solution -- adding 'images/gallery' -- seems to be the most straightforward solution I can think of.

 

#2 - Preloading:

Off the top of my head, I'm not sure. I'd imagine doing a Google search on "jQuery preload images" or similar might be a place to start.

 

A quick search turned up this: http://farinspace.co...preload-plugin/

 

I haven't tested this, but it appears that you could do the preloading by including the jquery plugin and adding

 

jQuery(function($) { // place within the jQuery block
$.imgpreload(['pathtoimage/images/a.gif', 'pathtoimage/images/b.gif', 'etc']); 
});

Link to post
Share on other sites
  • 1 year later...
Guest Mad-Lad

I hate to resurrect a year old thread, but this post seems to be on topic.

 

I'm in the process of integrating the galleria script to my site and am unfortunately a novice when it comes to scripting. I too am looking to achieve a rollover effect to show a before/after image when the cursor moves over the image (not the thumbnail). Over the last few days I have been trying to incorporate the elements listed above with no luck.

 

The test.html file I downloaded has the code here:

<ul class="gallery">

<li><img src="image.jpg" title="" alt=""></li>

 

My page has the image here:

<div id="gallery">

<a href="images/image.jpg"><img src="image thumbnail.jpg" alt=" title="">

 

Any ideas? Thanks in advance.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...