Jump to content

mxbrainwrong

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About mxbrainwrong

  • Rank
    Newbie

Previous Fields

  • Languages
    English, French, Tongues, Whalesong

Profile Information

  • Gender
    Female
  • Location
    London
  • Interests
    Writing, Forteana, Steam Punk Schtuff, Cardiacs, Swans, Siouxsie, Tolkien, Iain M Banks, Pratchett, Adams, Elbow, Florence, Radiohead, The Lake District, Thai Curries, Pubs, London History, Robert Rankin, The Mighty Boosh, Politics, Lighting my own f*rts etc etc Oh, and building them website thingies.
  1. Hi,Thanks so much for that. Sadly, I don't seem to be able to get it to work. The thumbs display but no joy when clicked. I've played around with removing the 'hide' command(s) and the full images display as before so I know that the function is being picked up on the page. I think that the problem may lie in the fact that both the thumbs and images are stored in an array which is taken from the database and so the html has to be dynamically generated using the display function (see below). I've applied your function to the output on this basis with the exception that the html is dynamically generated in two 'empty' divs 'container' and 'test' which are held in the body of the page. Is there some kind of obvious answer for this or are we now moving into the realms of the hyper complicated. Thanks for your help so far, any additional advice would be most welcome. ThanksStef function display (array) { $.each(array, function(i){ $('#container').append( '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>' ); $('#test').append( '<div id="'+array[i][0]+'" style="width: 398px;"><img src=images/'+array[i][7]+' width=398>' ); });} $(document).ready(function(){ //onload$("#test").hide(); //hide all test div + images$("#container").bind("click",function() // onclick of div/img element { $("#test").hide(); // hide any div/img already open //retrieve index ref of div/img clicked and fadein the image at the same index position within #test $("#test").eq($(this).index()).fadeIn('slow', function () { // animation complete }); });}); Html: <div id="container"></div><div id="test"></div>
  2. Thank you for your answer - sorry if i seem 'odd' and thanks for taking the trouble to point it out. Okay - firstly, the reason (not that it's particularly relevant here) that the array is in that format is because it was taken from the database as such and that's the format I've been working with thus far. To change it now would mean rewriting a whole chunk of code and to be frank, after the sheer headache this project has given me along with deadlines pertaining to it means that is neither desirable or practical. Secondly - you were right about the click handler, I overlooked that. Still not getting anywhere with this though.
  3. Hi folksI'm trying to initiate a click event (and subsequent image fade in) when a user clicks on a thumbnail. That in itself isn't such a problem. The problem lies in the fact that the thumbnails are contained in an array and are displayed with an append within an each loop (see code below). I've gotten halfway there, the code below does initiate a fade in when a thumbnail is clicked - however, it fades in all the images as opposed to just the one relating to the thumbnail that is clicked on. I know this is because by the time the #test append happened all the images have loaded so it just displays all of them. The question is, how can I get it to just display the full image related to the thumbnail that's been clicked on? I'm pretty new to this so apologies if this seems a bit pedestrian. Thanks in advanceStef For reference purposes:array[0] refers to id of imagearray[6] is the thumbnail urlarray[7] is the full image urlarray[8] & array[9] are x and y coordinates of the thumbnail on the page function display (array) { $.each(array, function(i){ $('#container').append( '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>' ); $('#test').append( '<div id="'+array[i][0]+'" style="width: 398px;"><img src=images/'+array[i][7]+' id=nav width=398>' ); $("#"+array[i]).click(function () { $("#test").fadeIn('slow', function () {// animation complete}); }); });} Full page attached upload.php
  4. Okay, here is the problem, the background to it is a little bit lengthy but please bear with me as I think it's probably essential to getting to the root of it. I'm trying to design an on-site navigation system using straight javascript and jquery. The site is for a photographer who has a number of galleries of her images she wants to put up. These are displayed on the page as a series of thumbnails which are arranged in a grid (lets say 3 by 3 here for simplicity's sake). The idea is that these can either be displayed in order of size or in order of the date the gallery was updated. There are two buttons at the top of the page 'size' and 'date' and whenh one of these is clicked the thumbnails should animate into the new position. I've reduced the arrays to their essential parts for the purposes of this question. They're defined in the header of the page as follows: //order: id, gallery size, gallery date (UK format), thumbnail url. x position (px), y position (px) var galDate = new Array();galDate[0] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galDate[1] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; galDate[2] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galDate[3] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galDate[4] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galDate[5] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galDate[6] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galDate[7] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galDate[8] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; var galSize = new Array();galSize[0] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galSize[1] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galSize[2] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galSize[3] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galSize[4] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; galSize[5] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galSize[6] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galSize[7] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galSize[8] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; Displaying the thumbnails and the animation is handled by three functions: which are defined in the <head> section of the page as follows: 'Swap' loops through the all the rows in array 1 defining the id, x position and y position as variables id1, x1 and y1 (please forgive the 'document writes' this was part of an earlier debugging attempt) function swap(array1, array2){for(i=0; i<array1.length; i++){var id1 = array1[0];document.write ('id1: ' + id1);document.write ('<br />');var x1 = array1[3];document.write ('x1: ' + x1);document.write ('<br />');var y1 = array1[4];document.write ('y1: ' + y1);document.write ('<br />'); // For each row in the first array, 'Swap' then loops through the second array. When the ids are equal, this triggers the 'animate' function, which then should handle the actual animation for(j=0; j<array2.length; j++){var id2 = array2[j][0];document.write ('id2: ' + id2 );document.write ('<br />');var x2 = array2[j][3];document.write ('x2: ' + x2 );document.write ('<br />');var y2 = array2[j][4];document.write ('y2: ' + y2 );document.write ('<br />'); if (id2==id1){animate(x2, y2);} //close if else {document.write('for loop i should continue');document.write ('<br />'); } } //close for j } // close for i } // close function // 'Animate' is triggered when the ids from each of the arrays correspond and performs the animation (nb – this isn't working perfectly at the moment but the basic animation functionality is working – getting the right thumbnals to animate to the right places is something I have to come back to but its not the main problem at the moment). function animate(x2, y2){$("#"+i).animate({left:x2, top:y2},"slow");document.write ('animate function triggered');document.write ('<br />');} // The actual displaying of the thumbnails is handled by a third function called, surprisingly, 'display' which is as follows. function display (array) {for (i=0, max = array.length; i<max; i++){ $('#container').append('<div id="'+array[0]+'" style="position: absolute; left:'+array[6]+'px; top: '+array[7]+'px;"><a href="#"><img src='+array[5]+' height=75px width=75px></a></div>');}} I have all of the above in the this order in the header of the page. Finally, I have the jquery click function call which is as follows: $(document).ready(function() {$('#size').click(function() {swap (galSize, galDate);}); $('#date').click(function() {swap (galDate, galSize);}); display(galDate); }); The body of the page is as follows: <body><button id="size">Size</button> <button id="date">Date</button><div id="container"></div><script>display (galDate);</script></body> Just to be clear, I realise that some of the actual functionality isn't going to churn out the desired result in terms of positioning etc. The fact of the matter though is that the 'swap' function works in as far as it animates the images (I know because I've tested it!) :-) The problem I have (and thanks to those who've stayed with me thus far!) is that as soon as I click on one of the buttons (size or date) the displayed thumbnails disappear. The swap function is still working because all the 'document writes' display on the page and, similarly the animate function is triggered as well. Its just thet there are no thumbnails anymore and they're sort of central to the whole undertaking. As you can probably tell, I'm pretty new to this and there is no doubt an obvious explanation. The thing is, I don;t know what it is. Any ideas or nods in the right direction would be much appreciated. CheersStef
  5. Please ignore my previous burblings. Solved by condensing the code as below: //Function to make arrays the same length function pruneArrays(sqlData1,sqlData2, coordinates){ for(i=(coordinates.length-sqlData1.length); i>0; i--){ coordinates.pop(coordinates); } var galDate = (populateArray(sqlData1, coordinates)); var galSize = (populateArray(sqlData2, coordinates)); return [galDate, galSize];} //Function to create date ordered array with coordinatesfunction populateArray (sqlData, coordinates){ for(i=0; i<sqlData.length; i++){ for(j=0; j<(sqlData.length-1); j++){ sqlData.push(coordinates[j]); } }return (sqlData);} and putting the call to the function in the body of the page. Apologies for the false alarm / time wasted. CheersStef
  6. Hi,Apologies if I'm doing something very obviously stupid here, I'm fairly new to this sort of thing. What I'm basically trying to do is crop a two dimensional array of coordinates to the same length as another array called from an sql database using php and then made useable in javascript via json_encode. The good news is that I've managed to accomplish this. The code below actually does this twice with the database information called in different orders so that I have two two-dimensional javascript arrays, each with an x and y coodinate tagged onto the end of each row. (For anyone who's interested in the whys and wherefores, the database contains information abpout different image galleries (title, description, thumbnail etc). I'm going to be using these two arrays along with jquery animate to allow visitors to the site to change the order in which thumbnails are displayed based on date gallery updated or gallery size). This all sort of works fine. There are a couple of functions, 'prune' which is the parent function (I think I'm using the terminology correctly) and two similar but separate 'populateArray' functions (1 and 2). The trouble is that the two inner functions don't seem to want to return a value. I can access the two arrays from within the populateArray functions but as soon as I try to return the values (as 'galDate' and 'galSize') I get nothing. Code is laid out below. Like I say, apologies if I'm making a really basic mistake here but I'm completely stumped and could do with a nod in the right direction. Thanks in advance.Stef <script>var sqlData1 = (<?php print json_encode($sqlData1);?>);var sqlData2 = (<?php print json_encode($sqlData2);?>); var coordinates = [['100px','100px'],['100px','200px'],['100px','300px'],['200px','100px'],['200px','200px'],['200px','300px'], ['300px','100px'],['300px','200px'],['300px','300px'],['400px','100px'],['400px','200px'],['400px','300px'],['500px','100px'],['500px','200px'],['500px','300px']]; //Function to make arrays the same length function pruneArrays(sqlData1,sqlData2, coordinates){ for(i=(coordinates.length-sqlData1.length); i>0; i--){ coordinates.pop(coordinates); } populateArray1(sqlData1, coordinates); populateArray2(sqlData2, coordinates); return();} //Function to create date ordered array with coordinatesfunction populateArray1 (sqlData1, coordinates){ for(i=0; i<sqlData1.length; i++){ for(j=0; j<(sqlData1.length-1); j++){ sqlData1.push(coordinates[j]); } } var galDate = sqlData1; //document.write(galDate); - if this line is active 'galDate' displays no problem //document.write ("<br /><br />"); return (galDate);} //Function to create size ordered array with coordinatesfunction populateArray2 (sqlData2, coordinates){ for(i=0; i<sqlData2.length; i++){ for(j=0; j<(sqlData2.length-1); j++){ sqlData2.push(coordinates[j]); } } var galSize = sqlData2; //document.write(galSize); - if this line is active 'galSize' displays no problem return (galSize);} document.write(pruneArrays(sqlData1, sqlData2, coordinates));// The line above however, doesn't return anything.</script>
×
×
  • Create New...