Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    mouseover images with Galleria photos

    I'm using the classic theme for galleria to create a basic image gallery. http://galleria.io/themes/classic/

    The gallery is for a photo retoucher who has some before/after photos that I want to switch in and out with a mouseover. Basically when the user hovers over the main image an unedited version of the image will show, when they mouse out the image will revert back to the original.

    I'm not sure how to achieve this with galleria. I thought I could target the img tags but that doesn't seem to be working.

    I'm relevantly inexperienced with javascript so I'm not sure how to target the imgs through galleria or if this can be accomplished in an effective way. (maybe changing the src?)

    I'm not sure if there is anyone familiar enough with galleria to help me out, but i figured asking can't hurt. Any sort assistance would be greatly appreciated.

  • #2
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Just taking a quick look at it, all the images are generated in JavaScript. To select the main image, you can use this code:

    Code:
    document.getElementsByClassName('galleria-layer')[1].nextElementSibling
    So you can try something like (depending on what you want to do):

    Code:
    var mainImg = document.getElementsByClassName('galleria-layer')[1].nextElementSibling;
    mainImg.onmouseover = function(){mainImg.src = "AnotherImage.jpg";};
    Just some advice, use the latest version of Firefox. It has some great tools, you can edit the page to figure this stuff out by going to Tools >> Web Developer >> Web Console. There, you can edit the entire web page interactively. You can also right click on an element and hit "Inspect Element" and it gives you info (that's how I found the "galleria-layer" class, without going through all of their JavaScript code).

    Also note that you might want to change my code a bit. I believe nextElementSibling doesn't work in older browsers, and you're probably going to want to add an onmouseout event as well.
    Last edited by hey; 04-12-2012 at 06:49 AM.

  • Users who have thanked hey for this post:

    Swade (04-12-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for your help! I will definitely take a look at it with FireFox. I knew the images were being generated with js, but wasn't sure where to go from there. I will use what you wrote as a place to start and take it from there.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    hey, did you play around enough to try and manipulate the main image or just saw the class identifier? I'm playing around with your code to see if I can a mouseover or any event to respond from it, but no luck so far.

  • #5
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    If you're on Firefox, go to the website, then hit: ctrl shift k, or go to Tools >> Web Developer >> Web Console

    Then in the command line (starts with >) enter this in:

    Code:
    document.getElementsByClassName('galleria-layer')[1].nextElementSibling.onmouseover = function(){this.src = "http://www.google.com/images/srpr/logo3w.png";};
    You should see the Google logo when you move your mouse over the main image.

    Or just change the URL to another image if the Google logo doesn't load up. Try this one too:

    Code:
    document.getElementsByClassName('galleria-layer')[1].nextElementSibling.onmouseover = function(){this.src = "http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg";};

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey! I tried out your code in firefox and it definitely works, which is awesome. But now Im trying to translate it to a js file to use and I'm not having as much luck. Besides nextElementSibling is there anything else that might cause things not to work?
    The idea is to set it up so all the before/after images have mouseover/out. Having a fade effect would be nice but im not worried about that yet. I'm guessing I would need an if statement to check which img is loaded in the main.

  • #7
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Actually, taking another look at it, Galleria has an API and a bunch of better ways to work with the images than native JavaScript. Take a look at their docs here: http://galleria.io/docs/

    I downloaded Galleria, then, at the bottom of the classic-demo.html file in galleria-1.2.7\galleria\themes\classic right before the end tag of the body, I added this script:

    Code:
    <script>
    Galleria.on('image', function(event) {event.imageTarget.onmouseover = function() {
        event.imageTarget.src = 'http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg';};
    });
    </script>
    So to get all of your code working, you can do something like this:

    Code:
    <script>
    Galleria.on('image', function(event) {
    	//event.imageTarget holds the main image
    	var orig_img = event.imageTarget.src; //save the orignal src so it can appear when we onmouseout
    	event.imageTarget.onmouseover = function(){
    		event.imageTarget.src = 'http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg';};
    	event.imageTarget.onmouseout = function() {
    		event.imageTarget.src = orig_img;};
    });
    </script>
    Try it out, just edit that classic-demo.html file and stick the above code at the bottom (right before </body>) and it should work. The problem is, you'll want a different image to appear for different thumbnails, and this example is a bit slow (you'll notice a pause when you first do the onmouseover, this is because the image isn't cached). If you read through the docs, there should be a more efficient way written there.

    Also, if you meant a fade effect when you click on the next image, you can add this code:

    Code:
    Galleria.configure({
        imageCrop: true,
        transition: 'fade'
    });
    There are a lot more effects listed here: http://galleria.io/docs/options/
    Last edited by hey; 04-14-2012 at 01:03 AM.

  • Users who have thanked hey for this post:

    Swade (04-14-2012)

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    hey, I redownloaded galleria to make sure everything was correct. You're code worked just as you said.

    While there may be a more elegant solution, I will tweak what you wrote with if statements which should handle the rollovers for different images. Thanks so much for taking the time to look into my question deeper and even download the files yourself. Really appreciate the help as I was stuck.

  • #9
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is great, thanks!

    Hey, hey!

    I'm wondering if there would be a better solution to integrate the code you used (works great by the way) with this:

    Code:
    $(document).ready(function() { 
    	$(".img-swap").hover(
              function(){this.src = this.src.replace("_off","_on");},
              function(){this.src = this.src.replace("_on","_off");
         });
    	 var imgSwap = [];
    	 $(".img-swap").each(function(){
    		imgUrl = this.src.replace("_off","_on");
    		imgSwap.push(imgUrl);
    	});
    	$(imgSwap).preload();
    });
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    I have image_off.jpg and image_on.jpg loading, but I am trying to get the mouseover to work with galleria. You can see it here without galleria running: http://brecksargent.com/4copy.php


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •