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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 41
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts

    jquery and offsetting content.

    Hi,

    I have been browsing a load of tutorials and found one which I can understand and which is easy to implement. When I hover over an image, I want it to display a larger image next to it as a sort of 'preview' feature of the image.

    I have added some of my own code (the opacity bits) and edited the other jquery to suit my needs. The problem I am having is as well as displaying the corresponding image, I also want it to display a bit of text underneath the image. I am successfully appending the paragraph to the body but when I try to manipulate the Y offset, it doesn't seem to work.

    Here is the code:
    Code:
    $(function(){
    	var offsetY = 15;
    	var offsetX = 15;
    	var offsetTextY = 300;
    	
    	$('#product_holder a img').hover(function(e){
    		$(this).stop().animate({'opacity' : 0.5});
    		var image = $(this).attr('src');
    		
    		$('<img id="largeImage" src="' + image + '" alt="image" />')
    			.css('top', e.pageY + offsetY)
    			.css('left', e.pageX + offsetX)
    			.appendTo('body');
    			
    		$('<p id="product_text">hello, this is information about the product</p>')
    			.css('top', e.pageY + (offsetY + offsetTextY))
    			.css('left', e.pageX + offsetX)
    			.appendTo('body');
    	
    	}, function(){
    		$(this).stop().animate({'opacity' : 1});
    		$('#largeImage').remove();
    		$('#product_text').remove();
    	});
    	
    	$('#product_holder a img').mousemove(function(e){
    		$('#largeImage')
    			.css('top', e.pageY + offsetY)
    			.css('left', e.pageX + offsetX)
    		$('#product_text')
    			.css('top', e.pageY + offsetY)
    			.css('left', e.pageX + offsetX)
    	});
    	
    });
    I have highlighted the line which doesn't seem to be working. As you can see I have created another variable with a value of 300 (this is the total height I set my 'preview' images to. I have to also accommodate for a bit of padding, but that can be done later). Trouble is when I try to add offsetY to offsetTextY, it doesn't seem to add them correctly. The paragraph offsets to the same area which the image does but the 300 pixels are not being accounted for thus covering the top half of the image. I have tried all kinds of different ways to make sure the the calculation of offsetY and offsetTextY is done first, but it doesn't seem to be working anyway.

    Thanks for any help you can give me.

    Regards,

    LC.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You probably need to add the text-offset to the mousemove event as indicated here:

    Code:
    	$('#product_holder a img').mousemove(function(e){
    		$('#largeImage')
    			.css('top', e.pageY + offsetY)
    			.css('left', e.pageX + offsetX)
    		$('#product_text')
    			.css('top', e.pageY + offsetY) << + offsetTextY
    			.css('left', e.pageX + offsetX)
    	});
    Otherwise, as soon as the mouse moves a little bit it will ignore the text-offset.

    BTW This is probably not the best way to do this - dynamically creating the elements. Preferable would be to have the image and paragraph contained within a hidden div, and use events to change the image src, the p-text, and then show (or fade, etc.) the div.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Ah ok, I only hardcoded the paragraph in there just to get it to position where I wanted it. I'm not sure about what I am going to do with regards to creating the individual information.

    So for example, if I create just 1 hidden div and set it to display none.

    Code:
    <div id="view"></div>
    
    //css
    #view 
    {
    width: 300px;
    height: 450px;
    border:1px solid black;
    padding: 1%
    background: #e6e6e6;
    display: none;
    }
    Then in the jquery do nearly the same (finding the x and y positions) but rather than displaying just an image and text, bring the display to be visible to the page again?

    Not sure how to go about writing the content for each image. Any thoughts about that?

    Thanks for the advice.

    Regards,

    LC.
    Last edited by LearningCoder; 11-30-2012 at 09:45 PM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <div id="view">
    <img id="viewimg" src="defaultimage.gif" height="100" width="100">
    <p id="imgdesc">dummy text</p>
    </div>
    Make the div visible initially and use css on all three elements until it looks good. The div should be position: absolute with a z-index so that it sits above other content - I'm assuming this is your requirement?

    I think the src is set using css() (I should double-check this ):

    Code:
    $('#viewimg').css('src','someother.gif');
    $('#imgdesc').text('What a great image!');
    $('#view').css('display','block'); //or fadeIn() etc.
    If you will be substituting different images and descriptions then I would store, and retrieve this information from, an array - or probably an object. Something like this:

    Code:
    var imgDetails = { "key1" : ["newimagesrc.gif", "Great description here"],
    "key2" : ["newimagesrc.gif", "Great description here"]
    //etc..
    };
    NB I haven't checked any of this - I'm just offering a few pointers/suggestions.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Just did a quick test, but it is attr() rather than css() to change the image source - Doh!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Some Title</title>
    <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <script type="text/javascript">
    var imgDetails = { "key1" : ["images/beach1.jpg", "Great description here"],
    "key2" : ["images/beach2.jpg", "Another great description here"]
    //etc..
    };
    function swapIt(somei) {
        alert(imgDetails['key' + somei][0]);
        $('#viewimg').attr('src',imgDetails['key' + somei][0]);
        $('#imgdesc').text(imgDetails['key' + somei][1]);
        $('#view').css('display','block'); //or fadeIn() etc.
    }
    
    </script>
    </head>
    <body>
    <h1>Image Presentation</h1>
    <button onclick="swapIt(1);">Click me</button>
    <div id="view">
    <img id="viewimg" src="images/defaultimage.jpg" height="240" width="200">
    <p id="imgdesc">dummy text</p>
    </div>
    </body>
    </html>
    [I should use a more recent jQuery library, but I just grabbed the nearest one to hand ]

    Added: Sorry that I didn't adapt your code, and I should use jQuery to add the click (or hover) event.
    Last edited by AndrewGSW; 11-30-2012 at 10:45 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    LearningCoder (12-03-2012)

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Hi andrew, thanks for the reply. I examined your code and edited it slightly to make it easier for myself to work with.

    Here is the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>HTML Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    
    #view{display: none;}
    </style>
    
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
    var imgDetails = { "key1" : ["phpwp.php", "php wallpaper"],
    "key2" : ["nasawp.jpg", "moon wallpaper"],
    "key3" : ["naturewp.jpg", "nature wallpaper"],
    "key4" : ["hillswp.jpg", "scottish hills wallpaper"],
    "key5" : ["tigerwp.jpg", "tiger wallpaper"],
    "key6" : ["citywp.jpg", "city in lights wallpaper"]
    //etc..
    };
    	$(function(){
    		var currentIndex = 1;
    		$('#swap').click(function(){
    			$('#view').slideUp('slow'); //or fadeIn() etc.
    			currentIndex++;
    			$('#viewimg').attr('src',imgDetails["key"+currentIndex][0]);
    			$('#imgdesc').text(imgDetails["key"+currentIndex][1]);
    			$('#view').slideDown('slow'); //or fadeIn() etc.
    			console.log(currentIndex);
    		});
    	});
    
    </script>
    
    
    </head>
    
    <body>
    What I am trying to achieve is, when the click function runs, to slide the current image up and then display the next by sliding down at the end of the function as usual. As it starts sliding up, the content changes to the next index of the array and displays the image before it's reached the top, then slides down the very same image and text.

    Is there a way I can tell jquery to stop what it's doing until the slideUp function finishes it's job.

    I tried putting .stop().slideUp bla bla and it didn't work. I know we can use stop() with animate() but clearly not with the basic css style functions. I also tried moving the iteration around to before the jquery functions(inside the click) and afterwards and no difference.

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-30-2012 at 11:57 PM.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    slideUp, like most jQuery methods, accept a callback to run when the method completes.

    Code:
    $('#view').slideUp('slow', function () {
        // do the next thing(s)..
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    LearningCoder (12-01-2012)

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Top man, thanks very much indeed. I noticed a lot of the functions have the callback parameter but never really known what it meant or how to use it.

    My images are displayed from a database so when trying to implement something like this in my site, how can I go about filling the array with the images which are retrieved rather than having to hardcode each src attribute?

    Edit: think i might have an idea, ill go ahead and attempt to do it. Just need to grab the src of the image which was retrieved the same as I did before and loop the values into an array?

    Cheers dude,

    Kind regards,

    LC.
    Last edited by LearningCoder; 12-01-2012 at 12:50 AM.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    At some point you might want to look into pre-loading (caching) the images - if there are a number of them, or they are quite big. Essentially, you create a new-images array and setting there src's loads them in the browsers cache.

    Code:
    var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];
    
    function preload(imgs) {
        var img;
        for (var i = 0, len = imgs.length; i < len; ++i) {
            img = new Image();
            img.src = imgs[i];
        }
    }
    
    preload(myImgs);
    The array is then generally ignored/discarded, as setting the src (as you are doing currently) will retrieve the images from the cache.

    You could probably combine this with constructing the imgDetails object, so that imgDetails is built at the same time as the images are cached.
    Last edited by AndrewGSW; 12-01-2012 at 01:07 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Would this be done completely separate from the jQuery and does it need to be done before any of the jQuery is run?

    Sorry I've never even looked at caching. Heard a lot but never read into it. :s

    Regards,

    LC.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by LearningCoder View Post
    Would this be done completely separate from the jQuery and does it need to be done before any of the jQuery is run?

    Sorry I've never even looked at caching. Heard a lot but never read into it. :s

    Regards,

    LC.
    The pre-loading can be done as the page is constructed, or afterwards in $(document).ready(). I'm guessing it would be sensible to do it in document.ready, so that it doesn't interfere with the initial construction of the page(?) - assuming the user is not likely to start hovering while the page is still loading.

    Perhaps you could ignore the pre-loading aspect until everything else is working.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    People seem to pre-cache images by running a script in the head tag - that is, as the page is constructed - so that they are available as soon as the page is loaded.

    I notice that we can also specify the size of the image(s):

    Code:
    image1 = new Image(480, 320);
    I like this
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Yea I will definitely keep this all in mind, thanks for the tips. I am going to get the functionality working between being able to select the correct image and text when I hover over that certain image. I will go back and read up on caching though once I've got this sorted.

    I forgot how much I like jQuery!

    Was a long night and found myself debugging other peoples code so I didn't work much on the jquery from around 10pm last night. Going to do my bits and get back on it today. Will update the thread later on with any issues which arise (let me assure you there will be!)

    Regards Andrew,

    LC.

  • #14
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    How can I get all the product images src attributes and store them into an array?

    I tried this:
    Code:
    var imgDetails = new Array();
    
    $(function(){
    	imgDetails = $('.prod img').attr('src');
    });
    console.log(imgDetails);
    and this:
    Code:
    $(function(){
    	for(var i=0;i<40;i++){
    		imgDetails[i] = $('.prod img').attr('src');
    		alert(imgDetails);
    	}
    });
    console.log(imgDetails);
    I think I need a loop but I'm not sure how to get the length of how many images they are. I know the length but didn't want to hardcode it incase I add more. I am trying to target all the images which comes from my database. (when they are retrieved, I give them a class of 'pos') I thought doing this I could target them with jquery using the class I'm just not sure on the functions of jquery and how to retrieve all the images. Using the second code everytime I click the alert box off, it pops up with another but displays this:
    Code:
    core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg
    i know to use the .attr('src') to get the value but how do I initially get the images and loop the src into the array?

    Can I give them any naming convention as a way to target them for example:

    Code:
    <img name="0" />
    <img name="1" />
    <img name="2" />
    <img name="3" />
    <img name="nth" />
    Then when I use the loop I can also grab that value and use the i variable to iterate through them?
    Any hints you can give me?

    EDIT: Awesome, just looked at the each() function on the jquery api and it's alerting me the src values.

    Regards,

    LC.
    Last edited by LearningCoder; 12-01-2012 at 03:10 PM.

  • #15
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    913
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Ok, I've wrote the code now to do exactly what I want:
    Code:
    $(function(){
    	var index = 0;
    	
    	$('.prod img').each(function(index) {
    		imgDetails[index] = $(this).attr('src');
    		alert(index+" "+imgDetails[index]);
    		index++;
    	});
    });
    This stores the src values into the array.

    I'm thinking now to make it multi-dimensional and add the corresponding text to each of the indexes.

    What is the best way to go about doing this?

    Should I be doing it at the same time as I put the src's into the array?

    Regards,

    LC.
    Last edited by LearningCoder; 12-01-2012 at 04:25 PM.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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