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 3 of 3 FirstFirst 123
Results 31 to 41 of 41
  1. #31
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Awesome so they can be used in all browsers but I need to use getAttribute to retrieve the info?

    Site looks very useful, that's one for the bookmarks!

    Kind regards,

    Lc.

  2. #32
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    but I need to use getAttribute to retrieve the info?
    You are using jQuery so just .data(..).
    "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. #33
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    I went ahead and done the jquery and also managed to do my idea of displaying the individual product on a template page. I'm buzzin right now.

    I didn't use the data- attribute. I stuck with title. You're information won't go forgotten though. I added the extra field to my database. When retrieving the products on the products page, I fill the 'title' attribute of the image with that data. The jquery seems to work even without the array you guys created me. I put that code in there and suddenly realized I had done it without it.

    Managed to get the text to align to the bottom of the image during the hover effect.

    Here's the code:
    PHP Code:
    title='{$row['product_desc']}' 
    jquery:
    Code:
    $(function(){
    	var offsetY = 15;
    	var offsetX = 15;
    	var offsetTextY = 320;
    	
    	$('#product_holder a img').hover(function(e){
    		$(this).stop().animate({'opacity' : 0.5});
    		var image = $(this).attr('src');
    		var text = $(this).attr('title');
    		
    		$('<img id="largeImage" src="' + image + '" alt="image" />')
    			.css('top', e.pageY + offsetY)
    			.css('left', e.pageX + offsetX)
    			.appendTo('body');
    			
    		$('<p id="product_text">' + text + '</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)+offsetTextY)
    			.css('left', e.pageX + offsetX)
    	});
    	
    });
    Then the individual product display:
    PHP Code:
    $conn = new mysqli("localhost","root","","gardenable") or die("Error: ".mysqli_error());

    $stmt $conn->prepare("SELECT imgName, product_price, product_dims, product_ref, product_desc FROM product_images WHERE imgID=?") or die("Error:".mysqli_error());
    $stmt->bind_param("s",$_GET['id']);
    $stmt->execute();
    $stmt->bind_result($img$price$dims$ref$desc);
    $stmt->store_result();
    $row $stmt->num_rows;

    if(
    $row >= 1){

        while (
    $stmt->fetch()){
            
            
    $output "<div id='product_ref_div'>";
            
    $output .= "<p class='dejavu'>Product ID: <span class='white bold'>{$ref}</span></p>";
            
    $output .= "</div>";
            
            
    $output .= "<img src='core/product_files/{$img}' title='{$desc}' alt='{$img}' id='display_img' />";
            
            
    $output .= "<div id='display_details_div'>";
            
    $output .= "<h2 class='dejavu white'>Product Details</h2>";
            
            
    $output .= "<h3 class='dejavu white'>Product Description</h3>";
            
    $output .= "<p class='dejavu'>{$desc}</p>";
            
            
    $output .= "<h3 class='dejavu white'>Product Dimensions</h3>";
            
    $output .= "<p class='dejavu'>{$dims}</p>";
            
            
    $output .= "<h3 class='dejavu white'>Product Price</h3>";
            
    $output .= "<p class='dejavu'>&pound;{$price}</p>";
            
            
    $output .= "</div>";
        }
        
    }
    else{

        echo 
    "selected no records.";
        

    Just need to fill out all the description rows in the database.

    I only looked at jquery again the other day and realized how much I liked it a year or so ago. Will definitely make more time for it.

    Thanks vm for all the help and guidance.

    Kind regards,

    LC.

  4. #34
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @LC Not a problem. Good luck.
    "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. #35
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by AndrewGSW View Post
    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
    Hi andrew, I have completed the products page and was wondering if you could help me with caching the images to help the loading of the page. My live version pretty much crashes my browser because of the amount/size of the images on my products page. I am going to send all my images through a site I found which optimizes the image file (I want them as small in size as possible) but I want to further help the loading by caching the files so the users have a better experience.

    I myself got quite annoyed when the browser has 3 second delays even for scrolling down the page. I don't think many users would stay on the site or even bother looking at my products if this is happening to them.

    Are there any good tutorials out there which can guide me through?

    Kind regards,

    LC.

  6. #36
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I might consider pre-loading just a few images at the beginning (script in the head tag) and, after the page has loaded, continue loading/caching the remaining images.
    Code:
    var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];
    var x = 0, y = 5;
    function preload(imgs, x, y) {
        var img;
        for (var i = x; i < y; ++i) {
            img = new Image(); // if you know the size of the images (and they are the same) use Image(200, 300);
            img.src = imgs[i];
        }
    }
    preload(myImgs, x, y);
    window.onload = function () {
        // or just put this code before the closing body tag
        preload(myImgs, y+1, myImgs.length);
    }
    In terms of a tutorial, I would just be Googling for one, but perhaps someone else has a recommendation.
    "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

  7. #37
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. and, not forgetting the best advice, don't put so many images on one page . If I hit such a page and my computer starts struggling, I hit the magic Back button.
    "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

  8. #38
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Thank you for the code, unfortunately I couldn't get it to work at first so slightly modified it to simplify it for me. I have kept the preload function though.

    So is this the preloading complete?

    Here is my code:
    Code:
    function images(){
    	setInterval("change_image()",5000);
    }
    
    function preload(imgs, x, y) {
        var img;
        for (var i = x; i < y; ++i) {
            img = new Image(); // if you know the size of the images (and they are the same) use Image(200, 300);
            img.src = imgs[i];
    		console.log(imgs[i]);
    		console.log(img);
        }
    }
    
    function change_image(){
    	var index = Math.floor((Math.random() * array_length));//generates a random number between 0-length of array
    	var image = "<img src='"+image_names[index]+"' alt='"+image_names[index]+"' title='"+image_names[index]+"' id='random_image' />";
    
    	document.getElementById("image_div").innerHTML = image;
    	document.getElementById("text").innerHTML = product_text;
    }
    
    var image_names = new Array("core/product_files/bench1.jpg","core/product_files/bench2.jpg","core/product_files/bench3.jpg","core/product_files/bench4.jpg","core/product_files/bench5.jpg",
    					"core/product_files/binstore1.jpg","core/product_files/binstore2.jpg","core/product_files/binstore3.jpg","core/product_files/binstore4.jpg","core/product_files/binstore5.jpg",
    					"core/product_files/birdhouse1.jpg","core/product_files/birdhouse2.jpg","core/product_files/birdhouse3.jpg","core/product_files/birdhouse4.jpg","core/product_files/birdhouse5.jpg",
    					"core/product_files/gate1.jpg","core/product_files/gate2.jpg","core/product_files/gate3.jpg","core/product_files/gate4.jpg","core/product_files/gate5.jpg",
    					"core/product_files/pethousing1.jpg","core/product_files/pethousing2.jpg","core/product_files/pethousing3.jpg","core/product_files/pethousing4.jpg","core/product_files/pethousing5.jpg",
    					"core/product_files/planter1.jpg","core/product_files/planter2.jpg","core/product_files/planter3.jpg","core/product_files/planter4.jpg","core/product_files/planter5.jpg",
    					"core/product_files/shed1.jpg","core/product_files/shed2.jpg","core/product_files/shed3.jpg","core/product_files/shed4.jpg","core/product_files/shed5.jpg",
    					"core/product_files/table1.jpg","core/product_files/table2.jpg","core/product_files/table3.jpg","core/product_files/table4.jpg","core/product_files/table5.jpg");
    				
    var product_text = "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature"
    	product_text += "from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked"
    	product_text += "up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>";
    				
    var array_length = image_names.length;//get the length of the array
    var x = 0; 
    var y = array_length;
    					
    preload(image_names, x, y);					
    
    
    window.onload = images();
    I have 2 console.logs() in the preload() function this is the output:
    Code:
    core/product_files/bench1.jpg
    
    main.js (line 10)
    <img src="core/product_files/bench1.jpg">
    main.js (line 11)
    
    core/product_files/bench2.jpg
    
    main.js (line 10)
    <img src="core/product_files/bench2.jpg">
    main.js (line 11)
    
    core/product_files/bench3.jpg
    
    main.js (line 10)
    <img src="core/product_files/bench3.jpg">
    main.js (line 11)
    
    core/product_files/bench4.jpg
    
    main.js (line 10)
    <img src="core/product_files/bench4.jpg">
    main.js (line 11)
    
    core/product_files/bench5.jpg
    
    main.js (line 10)
    <img src="core/product_files/bench5.jpg">
    main.js (line 11)
    
    core/product_files/binstore1.jpg
    
    main.js (line 10)
    <img src="core/product_files/binstore1.jpg">
    main.js (line 11)
    
    core/product_files/binstore2.jpg
    
    main.js (line 10)
    <img src="core/product_files/binstore2.jpg">
    main.js (line 11)
    
    core/product_files/binstore3.jpg
    
    main.js (line 10)
    <img src="core/product_files/binstore3.jpg">
    main.js (line 11)
    
    core/product_files/binstore4.jpg
    
    main.js (line 10)
    <img src="core/product_files/binstore4.jpg">
    main.js (line 11)
    
    core/product_files/binstore5.jpg
    
    main.js (line 10)
    <img src="core/product_files/binstore5.jpg">
    main.js (line 11)
    
    core/product_files/birdhouse1.jpg
    
    main.js (line 10)
    <img src="core/product_files/birdhouse1.jpg">
    main.js (line 11)
    
    core/product_files/birdhouse2.jpg
    
    main.js (line 10)
    <img src="core/product_files/birdhouse2.jpg">
    main.js (line 11)
    
    core/product_files/birdhouse3.jpg
    
    main.js (line 10)
    <img src="core/product_files/birdhouse3.jpg">
    main.js (line 11)
    
    core/product_files/birdhouse4.jpg
    
    main.js (line 10)
    <img src="core/product_files/birdhouse4.jpg">
    main.js (line 11)
    
    core/product_files/birdhouse5.jpg
    
    main.js (line 10)
    <img src="core/product_files/birdhouse5.jpg">
    main.js (line 11)
    
    core/product_files/gate1.jpg
    
    main.js (line 10)
    <img src="core/product_files/gate1.jpg">
    main.js (line 11)
    
    core/product_files/gate2.jpg
    
    main.js (line 10)
    <img src="core/product_files/gate2.jpg">
    main.js (line 11)
    
    core/product_files/gate3.jpg
    
    main.js (line 10)
    <img src="core/product_files/gate3.jpg">
    main.js (line 11)
    
    core/product_files/gate4.jpg
    
    main.js (line 10)
    <img src="core/product_files/gate4.jpg">
    main.js (line 11)
    
    core/product_files/gate5.jpg
    
    main.js (line 10)
    <img src="core/product_files/gate5.jpg">
    main.js (line 11)
    
    core/product_files/pethousing1.jpg
    
    main.js (line 10)
    <img src="core/product_files/pethousing1.jpg">
    main.js (line 11)
    
    core/product_files/pethousing2.jpg
    
    main.js (line 10)
    <img src="core/product_files/pethousing2.jpg">
    main.js (line 11)
    
    core/product_files/pethousing3.jpg
    
    main.js (line 10)
    <img src="core/product_files/pethousing3.jpg">
    main.js (line 11)
    
    core/product_files/pethousing4.jpg
    
    main.js (line 10)
    <img src="core/product_files/pethousing4.jpg">
    main.js (line 11)
    
    core/product_files/pethousing5.jpg
    
    main.js (line 10)
    <img src="core/product_files/pethousing5.jpg">
    main.js (line 11)
    
    core/product_files/planter1.jpg
    
    main.js (line 10)
    <img src="core/product_files/planter1.jpg">
    main.js (line 11)
    
    core/product_files/planter2.jpg
    
    main.js (line 10)
    <img src="core/product_files/planter2.jpg">
    main.js (line 11)
    
    core/product_files/planter3.jpg
    
    main.js (line 10)
    <img src="core/product_files/planter3.jpg">
    main.js (line 11)
    
    core/product_files/planter4.jpg
    
    main.js (line 10)
    <img src="core/product_files/planter4.jpg">
    main.js (line 11)
    
    core/product_files/planter5.jpg
    
    main.js (line 10)
    <img src="core/product_files/planter5.jpg">
    main.js (line 11)
    
    core/product_files/shed1.jpg
    
    main.js (line 10)
    <img src="core/product_files/shed1.jpg">
    main.js (line 11)
    
    core/product_files/shed2.jpg
    
    main.js (line 10)
    <img src="core/product_files/shed2.jpg">
    main.js (line 11)
    
    core/product_files/shed3.jpg
    
    main.js (line 10)
    <img src="core/product_files/shed3.jpg">
    main.js (line 11)
    
    core/product_files/shed4.jpg
    
    main.js (line 10)
    <img src="core/product_files/shed4.jpg">
    main.js (line 11)
    
    core/product_files/shed5.jpg
    
    main.js (line 10)
    <img src="core/product_files/shed5.jpg">
    main.js (line 11)
    
    core/product_files/table1.jpg
    
    main.js (line 10)
    <img src="core/product_files/table1.jpg">
    main.js (line 11)
    
    core/product_files/table2.jpg
    
    main.js (line 10)
    <img src="core/product_files/table2.jpg">
    main.js (line 11)
    
    core/product_files/table3.jpg
    
    main.js (line 10)
    <img src="core/product_files/table3.jpg">
    main.js (line 11)
    
    core/product_files/table4.jpg
    
    main.js (line 10)
    <img src="core/product_files/table4.jpg">
    main.js (line 11)
    
    core/product_files/table5.jpg
    
    main.js (line 10)
    <img src="core/product_files/table5.jpg">
    main.js (line 11)
    
    5
    
    main.js (line 22)
    I remembered I created an array already but it was within a template html file, so I've moved it to an external file and added it to my index.php file.

    Works a charm, I just don't know very much about caching so was wondering if this is complete now?

    Kind regards,

    LC.
    Last edited by LearningCoder; 12-11-2012 at 07:21 PM.

  9. #39
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var image_names = new Array("core/product_files/bench1.jpg","core/product_files/bench2.jpg","core/product_files/bench3.jpg","core/product_files/bench4.jpg","core/product_files/bench5.jpg",
    					"core/product_files/binstore1.jpg","core/product_files/binstore2.jpg","core/product_files/binstore3.jpg","core/product_files/binstore4.jpg","core/product_files/binstore5.jpg",
    					"core/product_files/birdhouse1.jpg","core/product_files/birdhouse2.jpg","core/product_files/birdhouse3.jpg","core/product_files/birdhouse4.jpg","core/product_files/birdhouse5.jpg",
    					"core/product_files/gate1.jpg","core/product_files/gate2.jpg","core/product_files/gate3.jpg","core/product_files/gate4.jpg","core/product_files/gate5.jpg",
    					"core/product_files/pethousing1.jpg","core/product_files/pethousing2.jpg","core/product_files/pethousing3.jpg","core/product_files/pethousing4.jpg","core/product_files/pethousing5.jpg",
    					"core/product_files/planter1.jpg","core/product_files/planter2.jpg","core/product_files/planter3.jpg","core/product_files/planter4.jpg","core/product_files/planter5.jpg",
    					"core/product_files/shed1.jpg","core/product_files/shed2.jpg","core/product_files/shed3.jpg","core/product_files/shed4.jpg","core/product_files/shed5.jpg",
    					"core/product_files/table1.jpg","core/product_files/table2.jpg","core/product_files/table3.jpg","core/product_files/table4.jpg","core/product_files/table5.jpg");
    I wouldn't have included the same directory in these repeatedly, could have fed it to the preload function as an additional argument and concatenated it to the image names:
    Code:
    function preload(imgs, imgDir, x, y) {
        img.src = imgDir + '/' + imgs[i];
    This would make it easier to change later if you move the images to a different folder . But never mind.
    Works a charm, I just don't know very much about caching so was wondering if this is complete now?
    If it works a charm then what else is there to know..? But I don't believe there is much more to this topic (apart from some server-side nonsense/trickery to persuade IE to use the cached image-store). Google is your pal if you want to study more.

    I suggested loading some images at the beginning and the rest after the page has loaded. I suppose an optimal solution could be to load images at various stages during page-load, but I wouldn't worry about this.

    Also.. some clever sites start loading some images that will be required on the next page, so that the transition between pages is smoother. But again, I wouldn't worry..
    "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. #40
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var image = "<img src='"+image_names[index]+"' alt='"+image_names[index]+"' title='"+image_names[index]+"' id='random_image' />";
    It is preferable and more efficient to just change the src, title and id of an existing element, rather than repeatedly replacing it with a new element.
    "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

  11. #41
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    When I said it works a charm I meant I was getting the values I wanted from doing the console.log() but I just didn't know if the process was complete or not. I will change the directory part.

    Thanks for the help.

    Regards,

    LC.


 
Page 3 of 3 FirstFirst 123

Posting Permissions

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