JavaScript - Problems With Galleria
Hi there,
I'm hoping someone can help me... I am using Galleria (http://galleria.aino.se/) for a friend's website but I just can't get it to work... I haven't used JavaScript or JQuery much and it's driving me mad!! I've followed all the instructions on the site, and lots of examples I have found all over the web... This one was most successful - http://monc.se/kitchen/stew/galleria/ the furthest I have been able to get is thumbnails showing, but when you click on them you can't see the gallery - see he http://lisacritcher.skillsontoast.co.uk/?page_id=28 I know the formatting is all off but I'm not worried about that for now... I just want to get the gallery working!! Can anyone help? Thanks in advance Similar TutorialsHello, Im not sure if anyone here will be able to help me but I thought it would be worth a shot. I am trying to use galleria for a project of mine. The gallery works fine - it brings the images in (from flickr) but only in the order that they have been added. I would like them to bring the images in using the sets I have used within flickr. I have managed to load one set using getSet but I would like it to load all sets in set order. (hope that makes sense). If anyone has experience with this or can point me in the right direction it would be much appreciated. Thanks in advance for any help/advice. Regards Mark Booth 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. Hi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message. The java script code is below: Code: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="galleria/galleria-1.2.5.min.js"></script> </head> <body> <div align="center"> <div id="gallery"> <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" /> <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" /> <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" /> </div></div> <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 540, height: 540 }); </script></div> </body> </html> I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is: http://www.raisingsistersconference....togallery.html Thanks so much. Hi, I am working on this site galleria and it seems that on some IE browsers on my client's computers, especially on his Vista, the Thumbnails are not showing up or loading fully and/or showing black with "error" in the spaces. On my firefox and safari I see the galleria images and scrolled text extending down the page briefly while the page is loading... Is this a JS issue or just a large image loading-time issue? I do not know JS and had adopted the JS code from another site so I am thinking there must be some errors in my JS settings. Secondly, can someone recommend a website that I could find the code and tutorial on how to install a simple JS scrolling marquee like the one I have on the site (which is hacked html right now) that will load quickly etc? Here is the site: <http://eagleeyeco.com/TEST/homes.html> Thanks! Okay, 3 questions I'm afraid, all in reference to the JQuery Galleria on this page: http://digital.tmhcentral.com/pratt/a... Apologies for my explanations as I am a newby to anything beyond html & css. 1. I have a number of images placed in my html page simply using the img tag. When the page is loading I see these images stacked (full size) for a few seconds before galleria loads and then begins to convert them into thumbnails. Any idea how to hide the images on the page but only to appear in the galleria as the images start to load as thumbnails? 2. I wish to have the same 5px (horizontal) gap between each thumbnail. However my images are of different sizes and have been optimized to a max width or max height. I do not wish for the thumbnails to be cropped so have set: thumb_crop: false, This has now visually created an inconsistent horizontal space between each thumbnail (highlighted in pink to show the gap left and right of each one). I have already attempted to change the thumbnail width to auto in the css, but with no success. How do I remove the 'excess' left & right space from each thumbnail so that the gap appears consistent? 3. Lastly, upon page load, is it possible to hide the main stage image until a thumbnail is selected? I wish to initially display some text (where the main image sits) which is then replaced with the main image when the user clicks on one of the thumbnails. I would appreciate help on any of the above. Thanks in advance, Paul insidehb.com/main/imageofday/aug16to31/aug16to31.htm 1. the "visit henrbuilt" link is in the wrong position (its supposed to be centered) 2. there are too many thumbnails for "aug 16 - 31" so i had to redo "thumbs_mask.gif" (which makes the gray and clear thing at the bottom that moves) so that it was longer and covered all the thumbnails. now that is is 400 px longer, the center of it moved 200px to the right and i cant get it to move 200px to the left. i would i guess it has to do with my style sheet (insidehb.com/main/imageofday/aug16to31/style13.css) but it could also have to do with my main html page (insidehb.com/main/imageofday/aug16to31/aug16to31.htm) 3. its still being messed up in IE even with a new doctype I am putting together a quiz in the form of a game, and I have tested the code for problems, and found a big one. Here is a part of my code that doesn't work- it always goes to "Sorry, incorrect", even when I type in 2.37. Code: var x=document.getElementById("varsource1"); if (x==="2.37") { alert("Correct."); (More code here) } else if(x !== "2.37") { alert("Sorry, incorrect."); } If anyone wants my whole code, I can put it up later, if you ask me for it. hi am studying for a exam an i have some problems. Just wanted to get an idea when is it more appropriate to use a for than a while loop? how much work is a loop performing? what is the fewest times a loop will perform its body? how many times will a loop perform its body? (as a function of a constant and of a variable) Hi: Code below works fine in Firefox and Firebug shows no problems. Code: function changePlaylist(newplaylist,no_of_items) { playerConfig.playlist = []; for(var i = 0; i < no_of_items; i++) { playerConfig.playlist[i] = newplaylist; } setTimeout("createPlayer()",1); //delay create player to allow playlist to "stabilize" mediaPlayer.play(); // play the newly loaded playlist sequence* } IE9 script debugging (attached file) indicates problems with mediaplayer.play(). Even so it plays a movie. When I try playing a different movie in IE 9 nothing happens. Like I said works fine in Firefox and worked fine in IE 8. I called MS about problems with IE 9 security stuff etc. Talked with a guy in Bangladesh or some place over a bad connection who said they were gathering bug information (as usual with MS). All the dialogs where you can "allow scripting" etc. etc. have been replaced with some mindless stuff (as usual for MS). Anyway, are there some workarounds for IE9 problems? i have 3 different problems: 1. I was trying to make is display Kentucky Resident yes is the box is checked and nothing if it is not checked. 2. while trying to add this in I messed something up and not the alert will not display anything at all. 3. last time I click the button the play load a page error and i have no idea why. any and all help would be appreciated. thanks. Code: <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>EKU</title> <script type="text/javascript"> //<![CDATA[ function valStudent() { var lastName = document.frmStudentInfo.txtLastName.value; var firstname = document.frmStudentInfo.txtFirstName.value; var mi = document.frmStudentInfo.txtS_Mi.value; var address = document.frmStudentInfo.txtS_Add.value; var city = document.frmStudentInfo.txtS_City.value; var state = document.frmStudentInfo.txtS_State.value; var zip = document.frmStudentInfo.txtS_Zip.value; var phone = document.frmStudentInfo.txtS_Phone.value; var dob = new Date (document.frmStudentInfo.txtS_Dob.value); var selectAdvisor = document.frmStudentInfo.lstF_ID.selectIndex; var res = document.frmStudentInfo.chkResident.value; var stuClass; var classChecked = false; for (var i=0; i < document.frmStudentInfo.optS_Class.length; i++) { if (document.frmStudentInfo.optS_Class[i].checked) { classChecked = true; stuClass = document.frmStudentInfo.optS_Class[i].value; } } if (lastName == "") { alert ("Please enter a last name"); document.frmStudentInfo.txtLastName.select(); return false; } else if (firstname == "") { alert ("Please enter a first name"); document.frmStudentInfo.txtFirstName.select(); return false; }else if (address == "") { alert ("Please enter a address"); document.frmStudentInfo.txtS_Add.select(); return false; } else if (city == "") { alert ("Please enter a city"); document.frmStudentInfo.txtS_City.select(); return false; } else if (state == "") { alert ("Please enter a state"); document.frmStudentInfo.txtS_State.select(); return false; } else if (zip == "") { alert ("Please enter a zip"); document.frmStudentInfo.txtS_Zip.select(); return false; } else if (phone == "") { alert ("Please enter a phone"); document.frmStudentInfo.txtS_Phone.select(); return false; }else if (dob == "NaN") { alert ("Date of Birth is not valid, use MM/DD/YYYY to enter data"); document.frmStudentInfo.txtS_Dob.select(); return false; }else { alert ("Last name: " + lastName + "\n" + "First Name: " + firstname + "\n" + "mi: " + mi + "\n" + "Address: " + address + "\n" + "City: " + city + "\n" + "State: " + state + "\n" + "Zip: " + zip + "\n" + "phone: " + phone + "\n" + "Date of Birth: " + dob + "\n" + "Advisor " + document.frmStudentInfo.lstF_ID.text(selectAdvisor).text + "\n" + "classfication " + stuClass); return true; } } //]]> </script> </head> <body> <table width="70%" align="center"> <tr> <td><img src="nwlogo.jpg" width="196" height="93" alt="** PLEASE DESCRIBE THIS IMAGE **" /></td> <td> <h2>Student Information</h2> </td> </tr> </table> <form name="frmStudentInfo" action="action%20marker" id="frmStudentInfo"> <table align="center"> <tr> <td> Last Name:</td> <td><input type="text" name="txtLastName" size="20" /></td> <td></td> <td> </td> <td> <h4>Class:</h4> </td> <td></td> </tr> <tr> <td> First Name:</td> <td><input type="text" name="txtFirstName" size="20" /></td> <td> </td> <td><input type="radio" name="optS_Class" value="Freshman" /></td> <td>Freshman</td> </tr> <tr> <td> MI:</td> <td><input type="text" name="txtS_Mi" size="5" /></td> <td> </td> <td><input type="radio" name="optS_Class" value="Sophomore" /></td> <td>Sophomore</td> </tr> <tr> <td> Address:</td> <td><input type="text" name="txtS_Add" size="20" /></td> <td> </td> <td><input type="radio" name="optS_Class" value="Junior" /></td> <td>Junior</td> </tr> <tr> <td> City:</td> <td><input type="text" name="txtS_City" size="20" /></td> <td> </td> <td><input type="radio" name="optS_Class" value="Senior" /></td> <td>Senior</td> </tr> <tr> <td> State:</td> <td><input type="text" name="txtS_State" size="5" /></td> <td> </td> <td><input type="radio" name="optS_Class" value="Graduate" /></td> <td>Graduate</td> </tr> <tr> <td> ZIP Code:</td> <td><input type="text" name="txtS_Zip" size="20" /></td> <td> </td> <td></td> <td></td> </tr> <tr> <td> Phone:</td> <td><input type="text" name="txtS_Phone" size="20" /></td> <td> </td> <td>:<input name="chkResident" type="checkbox" /></td> <td> Kentucky Resident</td> </tr> <tr> <td> Date of Birth:</td> <td><input type="text" name="txtS_Dob" size="20" /></td> <td> </td> <td>Advisor</td> <td><select size="1" name="lstF_ID"> <option selected="selected">1 (Chuck Lin)</option> <option>2 (Chris Blades)</option> <option>3 (Steve Loy)</option> <option>4 (Bob Mahaney)</option> <option>5 (Ted Randles)</option> </select></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit" onclick="valStudent()" /></td> </tr> </table> </form> </body> </html> I'm still not quite sure if I'm posting in the right place! I was using FireFox to design a page with a drop down box to select four different links. the script works just fine in FireFox but does nothing in IE8. Does anyone have any suggestions??? Script: <form action="../"> <select onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option value="">Choose a destination...</option> <option value="./Marrgolf_european_open.html">European OPEN</option> <option value="./Marrgolf_US_open.html">U.S. OPEN</option> <option value="./Marrgolf_masters.html">MASTERS</option> <option value="./Marrgolf_PGA.html">PGA</option> <option value="./Blank_page.html">Reserved</option> </select> </form> I'm currently in the process of updating our old website as the layout is just terrible and it's hard to find products on it. This new layout has drop down menus, accordion menus and an image enlarger all from JavaScript. They work wonders in Firefox and Google chrome but, as usual, Internet Explorer has decided not to load it right for me. I've got several problems... Images won't show up most of the time Not able to click on linked images and the links from the drop down menu Accordion menu won't work, it just displays as one long sidebar When it does work, it shows a big gap between each main header rather than keeping them close together The drop list from the drop down menu hides behind the accordion menu Is there anything I can do that makes IE accept the javascripts? Unfortunately the new layout isn't up live so I've nothing you can link to. However, if there's any coding that you need I'll be more than happy to post it on. Thanks for your time! Hi and firstly thank you in advance as I've just joined this forum in search of technical help. I am working on a website and having some problems with javascript that creates tabbed content on a page. The script is a free script from http://nuevvo.com/labs/simpletabs/. The problem is that the page with the script is not showing properly. The issue seems to only happen in Internet Explorer. The site was created on a development server and then copied over to the current hosting. The page appeared fine on the development server but when transferred to the new server the problem showed up. Please look at the following in Internet Explorer: This is how the page should look: http://www.sourcescotland.com/nobles...ing-times.html But on the new server it looks like this: http://www.galleyoflorne.co.uk/noble...ing-times.html The code is he Code: <script type="text/javascript" src="scripts/simpletabs_1.3.packed.js"></script> The actual code file is he http://www.galleyoflorne.co.uk/noble..._1.3.packed.js I would be willing to offer paid help if this is necessary. Or at least get to know you so that I can offer you work in future. I don't have anyone on my team yet that specialises in Javascript. thanks so much, Deb Why will scripts run in IE and not in firefox. I cant find any simple Javascript code that will create a username/password login that will work in both browsers.
I need a jump menu, that when an item is selected the next jump menu pops up with more selections to be made is this possible? I need what this... Code: $('#gatewayDimmer').width($('html').width()); $('#gatewayDimmer').height($('html').height()); $('#gatewayDimmer').css('display','block'); ...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance I am creating a shopping cart application that stores and retrieves cookies. I have two pages created. the first page has a table containing two rows, in which the user checks that item, and enters in the quantity. after the user selects one or both items and enters in the quantity, they click the button Add to cart, which stores this as a cookie. when the user clicks the view cart link, it brings them to view what they ordered in a table. my problem is, when the user clicks on the view cart link, how do i get the table to be displayed as the item name in the first column, the quantity in the second column, price in the third column, and the total for that item in the last column? here is the code for both my pages Code: <html> <head> <title> Store </title> <h1> My store </h1> <script type="text/javascript"> function setCookie() { var exdate = new Date(); exdate.setDate(exdate.getDate() +10); document.cookie = "price="+ document.getElementsByName("Price")[0].value + ";expires="+exdate.toGMTString(); } function retrieve() { document.getElementsByName("fullName")[0].value = document.cookie; } function Calc() { if (document.getElementById("calcu")){ var pri = document.getElementById("price").value; var qty = document.getElementById("quantity").value Total(pri,qty) } } function Total(pri, qty) { var pri = document.getElementById("price").value var qty = document.getElementById("quantity").value if (document.getElementById("circle").checked) { document.getElementById("total").value = pri * qty } } functino load() { document.getElementById("circle") } </script> </head> <body> <table border = "1"> <td> <input type="checkbox" id = "circle"> Circle </td> <td> <img src="circle.jpg"> </td> <td> Price: <input type = "text" size = "4" name = "price" />$ </td> <td> Quantity: <input type = "text" size = "4" id = "quantity"/> </td> <tr> </tr> <td> <input type = "checkbox"> Stickman </td> <td> <img src = "stickman.gif"> </td> <td> Price: <input type = "text" size = "4" value = "$" id = "price" /> </td> <td> Quantity: <input type = "text" size = "4" id = "quantity" /> </td> </table> <br /> <input type = "button" value = "Add to cart"> <br /> <br /> <a href ="cart.html" onclick = "retrieve()"> View Cart </a> <br /> <input type = "text" size = "8" id = "total"readonly = "readonly" /> Total <br /> <input type = "button" id = "calcu" value = "calc" onclick = "Calc()" /> </body> </html> Code: <html> <head> <title> Cart </title> <h1> My cart </h1> <script type = "text/javascript"> function retrieve() { document.getElementsByName("price")[0].value = document.cookie; } </script> </head> <body> <table border = "1"> <td> Stickman </td> <td> <script type = "text/javascript">document.getElementById ("price") </script> </td> <td> price per </td> <td> total </td> <tr> </tr> <td> Circle </td> <td> quantity order </td> <td> price per </td> <td> total </td> <tr> </tr> <td colspan = "3"> TOTAL: </td> <td> total price </td> </table> <br /> <br /> <script type="text/javascript">document.write(retrieve("price")); </script> <br / > <br /> <input type = "button" value = "Checkout"> <br /> <br /> <a href = "store.html"> Continue Shopping </body> </html> for this code, where it says quantity ordered, its supposed to display the quantity the user entered. price per is displaying the price, and where it says total, the total of that item. I have this form I am trying to get right but I am very stuck! I have looked this up all over the Internet and the answers conflict too much, I need your expertise please. My HTML is: Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>GPS-ware Order Form</title> <link href="gps.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="form.js"></script> </head> <body> <form id="orders" method="post" action="done.htm"> <div id="links"> <a href="#" class="newgroup">Home Page</a> <a href="#">Product Catalog</a> <a href="#">Order Form</a> <a href="#">Maps Online</a> <a href="#">Contact Us</a> <a href="#" class="newgroup">Countries</a> <a href="#">States</a> <a href="#">National Parks</a> <a href="#">Hiking Trails</a> <a href="#">Cities</a> <a href="#">Astronomical</a> <a href="#">Natural</a> <a href="#" class="newgroup">GoMap 1.0</a> <a href="#">Drive Planner 2.0</a> <a href="#">Hiker 1.0</a> <a href="#">G-Receiver I</a> <a href="#">G-Receiver II</a> <a href="#">G-Receiver III</a> <a href="#" class="newgroup">Downloads</a> <a href="#">Tech Support</a> <a href="#">FAQs</a> </div> <div id="main"> <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p> <h1>Order Form</h1> <p id="datep"> <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy" tabindex="-1" readonly="readonly" /> </p> <fieldset> <legend>Enter the quantity of each item and press the Tab key</legend> <table cellspacing="2"> <tr><th class="label">Product</th><th>Price</th> <th>Quantity</th><th>Cost</th></tr> <tr> <td class="label">GoMap 1.0</td> <td><input name="price1" id="price1" size="8" value="19.95" tabindex="-1" readonly="readonly" /> </td> <td><input name="qty1" id="qty1" size="8" value="0" /> </td> <td><input name="cost1" id="cost1" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="label">Drive Planner 2.0</td> <td><input name="price2" id="price2" size="8" value="29.95" tabindex="-1" readonly="readonly" /> </td> <td><input name="qty2" id="qty2" size="8" value="0" /> </td> <td><input name="cost2" id="cost2" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="label">Hiker 1.0</td> <td><input name="price3" id="price3" size="8" value="29.95" tabindex="-1" readonly="readonly" /></td> <td><input name="qty3" id="qty3" size="8" value="0" /> </td> <td><input name="cost3" id="cost3" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="label">G-Receiver I</td> <td><input name="price4" id="price4" size="8" value="149.50" tabindex="-1" readonly="readonly" /></td> <td><input name="qty4" id="qty4" size="8" value="0" /> </td> <td><input name="cost4" id="cost4" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="label">G-Receiver II</td> <td><input name="price5" id="price5" size="8" value="199.50" tabindex="-1" readonly="readonly" /></td> <td><input name="qty5" id="qty5" size="8" value="0" /> </td> <td><input name="cost5" id="cost5" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="label">G-Receiver III</td> <td><input name="price6" id="price6" size="8" value="249.50" tabindex="-1" readonly="readonly" /></td> <td><input name="qty6" id="qty6" size="8" value="0" /> </td> <td><input name="cost6" id="cost6" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr><td class="col4" colspan="4"> </td></tr> <tr> <td class="col3" colspan="3">Sales Tax (5%)</td> <td><input name="tax" id="tax" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="col3" colspan="3"> <select id="shipping" name="shipping"> <option value="0">Choose a shipping option</option> <option value="4.95">Standard (4-6 business days) $4.95</option> <option value="8.95">Express (2 days) $8.95</option> <option value="12.95">Next Day (1 day) $12.95</option> </select> </td> <td><input name="shipcost" id="shipcost" value="0.00" size="12" tabindex="-1" readonly="readonly" /> </td> </tr> <tr> <td class="col3" colspan="3">TOTAL</td> <td><input name="total" id="total" size="12" value="0.00" tabindex="-1" readonly="readonly" /> </td> </tr> </table> </fieldset> <p id="pbuttons"> <input type="reset" value="Reset" /> <input type="submit" value="Submit Order" /> </p> </div> </form> </body> </html> This may seem like a very noob-like question but I just can't figure it out! I am new to Javascript and I was playing around with if...else.. statements. I made this little code to see if I can make a password activated code. In this case I just want it to open an alert window if the right password is put in. I have tried running this in Chrome, IE and Firefox and none of them worked. Code: <script type="text/javascript"> var n1=prompt("Please enter the correct password."); if (n1=1147) { alert("Congrats! You guessed the right password!"); } else { alert("I am sorry"n1" is not the correct password. Please try again"); } </script> Hello. I have the following: bottomCell.innerHTML = "apples 0"; bottomCell.innerHTML.replace("apples", "oranges", "gi"); The first line works fine, the second one doesn't. In the end, I want it to replace all instances of the numerical variable named myNumber to the string "t" + newNumber (where newNumber is another numerical variable) but neither this, nor the above mentioned line work. Any ideas? Thanks! |