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 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 41
  1. #16
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Where are the image src and descriptions coming from? If you are using a server-side script to retrieve these details from a database, file or folder, then constructing and populating a multi-dimensional array within a loop is the way to go.

    If the details are fixed then you would just hard-code the array:

    Code:
    var imgDetails = [];
    imgDetails[0] = [ "path/image1.gif", "Some great description."];
    imgDetails[1] = [ "path/image2.gif", "Some other great description."];
    // etc.
    
    // details are retrieved as:
    imgDetails[0][0];    // the first image path
    imgDetails[0][1];    // the first description
    
    // the number of images can just be set in stone, or read using length:
    var imgLength = 10;    // or
    var imgLength = imgDetails.length;
    "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

  2. #17
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var imgDetails = [];
    
    $(function(){
    	var index = 0;
    	
    	$('.prod img').each(function(index) {
                    imgDetails[index] = [];
    		imgDetails[index][0] = $(this).attr('src');
    		imgDetails[index][1] = "Where to retrieve this description..?";
                    // it could be the title, or a data-* attribute..?
                    // imgDetails[index][1] = $(this).attr('title');
    		index++;
    	});
    });
    Added: You don't need var index = 0 or index++ because index is already available - see the parameter to the each() method. Just delete these two lines.
    Last edited by AndrewGSW; 12-01-2012 at 05:35 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

  3. #18
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    $(function(){
    	var imgSrcArray=[];
            var imgTxtArray=[]; 	
    	$('.prod img').each(function(index) {
    		imgSrcArray.push($(this).attr('src'));
                    imgTxtArray.push($(this).text());
                     alert(imgSrcArray[index]+imgTxtArray[index]);
    
    	});
    });
    something like this?

  4. #19
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @DanInMa Images don't have text().
    Last edited by AndrewGSW; 12-01-2012 at 09:01 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

  5. #20
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by AndrewGSW View Post
    @DanInMa Images don't have text().
    woops! thanks bud hahaha!

  6. #21
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    woops! thanks bud hahaha!
    No worries . Could use title though:

    Code:
    imgTxtArray.push($(this).attr('title'));
    I would prefer not to use two separate arrays but I suppose this comes down to personal preference . Andy.
    "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. #22
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts

    Multi-dimensional array

    Follows a dull (useful?) discussion - I have too much time on my hands today .

    Code:
    //Multi-dimensional arrays or array of objects?
    
    var imgDetails = []; // an array 
    imgDetails[0] = ["image1.gif", "Some description 1."];
    // each element is also an array 
    imgDetails[1] =["image2.gif", "Some description 2."];
    // etc. this creates a multi-dimensional array, of length..
    var imgLength = imgDetails.length;
    var secondDescription = imgDetails[1][1];
    
    // Alternatively, we can create an "associative array":
    var imgAssoc = []; // an array 
    imgAssoc['img1'] = ["image1.gif", "Some description 1."];
    imgAssoc['img2'] = ["image2.gif", "Some description 2."];
    
    //var imgLengthAssoc = imgAssoc.length;
    // ..doesn't work: assoc. arrays don't have a length property!
    var secDescription = imgAssoc['img2'][1];
    console.log(secDescription);
    // Element ids are natural candidates to use as (associative) keys. However, if 
    // the ids are row1, row2, etc., or image0, image1, etc., then there is little 
    // to be gained by using an associative (rather than indexed-) array, and indexed 
    // versions are easier to navigate (they have a length).
    var imgs = [];
    imgs['image0'] = ["something", 0];
    // associative arrays are objects, so we should be doing this instead:
    // imgs['image0'] = {"first_attr": "something", "second_attr": 0};
    imgs['image1'] = ["else", 1];
    imgs['image2'] = ["here", 2];
    alert(imgs.length); // 0 => associative arrays are objects and don't have 
    // an in-built length property.
    for (var key in imgs) {
        console.log(imgs[key][0]);
        // or, preferably, imgs[key].someAttribute
    }
    
    // We can create a multi-dimensional array if all elements are of 
    // the same type and have a similar purpose:
    var arrConsistent = [];
    arrConsistent[0] = [ 12, 24, 36 ];  // they are all numbers (multi-D array)
    console.log(arrConsistent[0][2]); // 36
    // We can then loop through every element more easily:
    for (i=0; i < arrConsistent.length; i++) {
        for (var j=0; j < 3; j++) {
            arrConsistent[i][j] = arrConsistent[i][j] + 10;
        }
    }
    
    var arrInconsistent = [];
    // creating an array of objects
    arrInconsistent[0] = { "src": "images/some1.gif", "desc": "Great 1" };
    arrInconsistent[1] = { "src": "images/some2.gif", "desc": "Great 2" };
    // Although both elements are strings they have distinct purposes and meaning.
    
    arrInconsistent[0].desc = "Changed description";
    // This object (attribute) notation makes code easier to read (rather than 
    // arrInconsistent[0][1]).
    for (i=0; i < arrInconsistent.length; i++) {
        arrInconsistent[i].src = "deleted.gif";
        arrInconsistent[i].desc = "No more";
        console.log(arrInconsistent[i].desc);
    }
    "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. #23
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Thanks for the code. The problem I see with using the 'title' is when they are retrieved from the database, I use the name of the product, let's say 'tables' and put that into the title.

    As you can guess, all my benches images have 'bench' as the title, all my table images have 'tables' as the title.

    Here is the code I used:
    Code:
    var imgDetails = new Array();
    
    $(function(){
    	var imgSrcArray=[];
        var imgTxtArray=[]; 	
    	
    	$('.prod img').each(function(index) {
    		imgSrcArray.push($(this).attr('src'));
            imgTxtArray.push($(this).attr('title'));
            alert(imgSrcArray[index]+imgTxtArray[index]);
    		console.log(imgSrcArray[index]+imgTxtArray[index]);
    	});
    });
    And here is what console.log() is returning to me.
    Code:
    core/product_files/bench1.jpgbenches
    
    ?page=products (line 21)
    
    core/product_files/bench2.jpgbenches
    
    ?page=products (line 21)
    
    core/product_files/bench3.jpgbenches
    
    ?page=products (line 21)
    
    core/product_files/bench4.jpgbenches
    
    ?page=products (line 21)
    
    core/product_files/bench5.jpgbenches
    
    ?page=products (line 21)
    
    core/product_files/binstore1.jpgbin_stores
    
    ?page=products (line 21)
    
    core/product_files/binstore2.jpgbin_stores
    
    ?page=products (line 21)
    
    core/product_files/binstore3.jpgbin_stores
    
    ?page=products (line 21)
    
    core/product_files/binstore4.jpgbin_stores
    
    ?page=products (line 21)
    
    core/product_files/binstore5.jpgbin_stores
    
    ?page=products (line 21)
    
    core/product_files/birdhouse1.jpgbird_housing
    
    ?page=products (line 21)
    
    core/product_files/birdhouse2.jpgbird_housing
    
    ?page=products (line 21)
    
    core/product_files/birdhouse3.jpgbird_housing
    
    ?page=products (line 21)
    
    core/product_files/birdhouse4.jpgbird_housing
    
    ?page=products (line 21)
    
    core/product_files/birdhouse5.jpgbird_housing
    
    ?page=products (line 21)
    
    core/product_files/gate1.jpggates
    The only other way I see how to do this, without hardcoding the text array is to store the title information into a field in the database and when retrieved, apply it to the corresponding image then I have some sort of values to work with in the attr('title') jquery code.

    I don't want to edit my database just for a jquery effect as my prepared statements and other bits will have to be edited.

    Is the only other alternative to hardcoding the textarray?

    Regards,

    LC.
    Last edited by LearningCoder; 12-01-2012 at 11:43 PM.

  9. #24
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Still not sure where the descriptions are coming from?? Are they stored in, and retrieved from, a database?

    Anyway, although I mentioned title, I would generally prefer not to use it. You can use 'data-*' HTML5 attributes which are supported by the jQuery data() method.

    Code:
    <img id="thisone" src="whatever.gif" data-desc="Here be a description." height="100" width="100">
    
    alert($('#thisone').data('desc'));
    If you are using JS to create data-* attributes (after the page has loaded) then you need to use setAttribute(), or attr() in jQuery.

    FWIW If you are running JS/jQuery code after the page has loaded you can just invent your own properties and attach them to DOM elements:

    Code:
    var myImage = document.getElementById("thisone");
    // jQuery: var myImage = $('#thisone');
    myImage.anyPropertyIFancy = "Ta Da!";
    These properties can then be read directly by your code, but this is probably not relevant to your current code.
    Last edited by AndrewGSW; 12-02-2012 at 12:06 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. #25
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by AndrewGSW View Post
    Still not sure where the descriptions are coming from?? Are they stored in, and retrieved from, a database?
    No they haven't been written yet. I'm unsure about the approach. I'm reluctant to edit the database setup just to implement some jquery because I already have my prepared statements set up and it would mean editing a few files.

    Although, I think it would make it a lot easier if I did do this, because when they are read out from the database, I can just target that field and apply it to the title.

    Something like this:
    PHP Code:
    echo "<img title='{$row['description']}' />" 
    Then that would give me access to the title value of each image...

    Hmmm decisions decisions...

    Regards,

    LC.

  11. #26
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You could store the descriptions in a simple JSON file:

    PHP Code:
    $file_desc file_get_contents("somefolder/desc.json");
    $json_desc =json_decode($file_desctrue); 
    ..but if you do this you might as well (perhaps..) store the image src's in this same file/object. This is not that different from hard-coding the information in the page, but does allow you to modify it separately. Anyway, just a consideration.

    If the image descriptions are generally relevant to the images and, therefore, might be useful on other occasions (in other pages) then you could store them in the database. Anyway, I'm sure you are considering this already

    I would still consider looking to data-desc rather than title, as you might decide to use the title at a later date:

    PHP Code:
    echo "<img data-desc='{$row['description']}'>"
    "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. #27
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    It's a relatively simple site. In total there are 6 pages (just html template files) which are loaded in with PHP.

    Having said that, at the moment when they hover over the image on the products page, I want it to obviously show the jquery effect. But when they click it, it just opens the image into a new window to show the larger version, as you would expect.

    Would be quite good if when they actually clicked it, I open the link to a template file showing the descriptions and all information to do with that individual product. Kinda like when you go on Argos or something, you click a product and it goes into a new page loading in just the content to do with that product.

    Oh god this is getting deep.

    At this moment in time, I'm very much considering to edit the database and retrieve it into the data-desc attribute.

    Can't seem to find much documentation on data-desc....

    Is it a new HTML 5 attribute?

    Edit: Yep going to go with adding an extra column in my table. Just gone through and I've only got to modify the query and slightly modify the script which retrieves/displays the products info to compensate for the data-desc. May as well go for it, should prove a good challenge!

    Regards,

    LC.
    Last edited by LearningCoder; 12-02-2012 at 02:18 AM.

  13. #28
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You can read about data-* in the jQuery docs for data() or here.
    "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

  14. #29
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Just reading through the second link there....will I need to change my doctype to the html5 one?

    Also, while i'm posting, is data- supported by ALL major browsers; ie,ff,chrome,opera and safari? I'll carry on reading, might give me some info on the site about it.

    Edit: hmm just got to the bottom and read that data- is supported in all major browsers except IE. Darned IE, there's always one!

    Might have to be the title attribute, it can always be updated to a data- attribute once it has become a standard.


    Anyone know how far away it is from actually being implemented as a standard???

    Regards,

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

  15. #30
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    There's a support table here. I believe the most useful aspects would also work even in older browsers.

    PS That's a very useful site
    Last edited by AndrewGSW; 12-02-2012 at 08:29 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


 
Page 2 of 3 FirstFirst 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
  •