JavaScript - Lightbox Help Or Recommend
Hi,
I have tried lightbox2 and jquery lightbox and I have the same problem with both. I have added the javascripts and css files for the lightbox. This is my code: <a href="getsnap.php?id={$user.id}&typ=full&picid={$pic.picno}" rel="lightbox" title="TITLE"><img src="getsnap.php?id={$user.id}&typ=tn&picid={$pic.picno}" width="45" height="45" alt="" /></a> The problem hee is when you click on the image, it want you to save the file to your computer and not use the lightbox effect. I have to put the image through getsnap.php?etc.... Any ideas? Similar TutorialsI would like to have a Javascript WYSIWYG text editor for the site mentioned on the bottom of this post. I don't need anything complex, but basic rich text editing. I know a few of them like CKEditor, TinyCME, WMD etc. I would like to hear others' experience in the regard. Thanks. Hey guys, I'm new to the forum, just registered today. And I'm wondering whats the best javascript editor out there? I'm going to school for web development and I'm taking a javascript class next semester, the problem is the class is online so i have to teach myself. I have previous coding experience with html, css, actionscript 2 and coldfusion. I want to know whats the best editor out there is? I have used Dreamweaver for my previous coding and i don't like it. It feels to bloated and has way to much stuff i never use. Anyone want to share what they use? Make me a recommendation, it doesn't matter weather its for mac or pc. I have a macbook pro i use for school and i already have a a copy of adobe creative suite 5 for mac and Visual studio 2010 for windows. Anyone ever use visual studio for web development? I would really appreciate any help you can give me. Anyway thanks for reading my long post, and any advice is really appreciated. Thank You, Emiljan Figured it out... admin can delete.
I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides. this is the code im using: Code: // Javascript <script language="javascript"> $(function(){ $("a#show-panel").click(function(){ $("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000); $("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000); }); $("a#close-panel").click(function(){ $("#lightbox, #lightbox-panel").fadeOut(300); }); }); </script> // CSS #lightbox { display:none; background:#000000; opacity:0.9; filter:alpha(opacity=90); position:absolute; top:0px; left:0px; min-width:100%; min-height:100%; z-index:1000; } #lightbox-panel { display:none; position:fixed; top:100px; left:50%; margin-left:-200px; background:#FFFFFF; padding:10px 15px 10px 15px; border:2px solid #CCCCCC; z-index:1001; } // HTML <a id="show-panel" href="#" class="small">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center"> <a id="close-panel" href="#" class="small">Close this window</a> </p> </div><!-- /lightbox-panel --> <div id="lightbox"> </div><!-- /lightbox --> http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ I was wondering if it is possible to embed javascript within a lightbox. I believe a lightbox in most cases uses its own javascript code, but i am looking to have an unrelated javascript function working within the lightbox, under the image, if possible. Thanks in advance. Any idea how can I use the slimbox to create a really small lightbox (such as 5x5 pixels), instead of the usual large lightbox? Your help is appreciated. Hi there, I have a slideshow that gathers images from a database. I've been trying to set it up to where it extracts the IMG SRC accordingly so when I click on the image, the lightbox shows the corresponding image. But no luck thus far. Here's what I mean: Code: <SCRIPT TYPE="text/javascript"> <!-- SLIDES = new slideshow("SLIDES"); <?php do { ?> s = new slide(); s.src = '<?php echo $row_paintings['painting']; ?>'; s.text = '<b><?php echo $row_paintings['title']; ?></b><br /><span style="font-size:10px;"><?php echo $row_paintings['material']; ?><br /><?php echo $row_paintings['size']; ?><br /><?php echo $row_paintings['date_created']; ?></span>'; SLIDES.add_slide(s); <?php } while ($row_paintings = mysql_fetch_assoc($paintings)); ?> //--> </script> How can I extract the current "s.src" parameter and use it on the "img src" tag to display the image accordingly? Any help would be much appreciated. Thanks! i made a gallery using lightbox but i have a problem that the menu (created by allwebmenu program) is always on top of the lightbox so the pictures i cutted.. how to solve this problem? Hey folks, I'm working on a complete recode of my website and I would love to use a lightbox for my image gallery. I've been trying to research different lightboxes and have so far found it quite the runaround. Could anyone recommend one? I'm just looking for one with simple implementation that allows for a single image to be displayed with closing and forward/backward functions for clicking through the different images in the gallery. If anyone wants/needs more info, please let me know. Thanks in advance. Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script> <script type="text/javascript"> confirmBox.setText("This is a test"); //Sets the text to show in the box confirmBox.setTrueText("I can see it"); // sets the text on the return true button confirmBox.setFalseText("I can't see it"); // sets the text on the return false button confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked confirmBox.show(); // Show the confirmBox </script> I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7. Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work. Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps) Thanks. Code: <? session_start(); if(!session_is_registered(myusername)){ header("location:index.php"); } ?> <?php //users data query $sesusername = $_SESSION['myusername']; $sespassword = $_SESSION['mypassword']; include_once("scripts/connect.php"); $memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'"); while($row = mysql_fetch_assoc($memberquery)){ $id = $row['id']; $photo = $row['profile_picture']; $name = $row['name']; $username = $row['username']; $joined = $row['date_joined']; $password = $row['password']; $email = $row['email']; $freinds = $row['friends']; } ?> <?php //friends data $friendsquery = mysql_query("SELECT * FROM members"); while($row = mysql_fetch_assoc($friendsquery)){ $user = $row['name']; $userpic = $row['profile_picture']; $id = $row['id']; { $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ; } } ?> <DOCTYPE HTML> <html> <head> <title>Dead psycho | Friends</title> <style type="text/css"> #friend_container{ display:none; background:#000000; opacity:0.7; filter:alpha(opacity=90); position:absolute; top:0px; left:0px; min-width:100%; min-height:100%; z-index:1000; } #friends_content{ display:none; position:fixed; top:100px; left:50%; margin-left:-200px; width:400px; max-height: 400px; background:#FFFFFF; padding:10px 15px 10px 15px; border:2px solid #a11e22; z-index:1001; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; Overflow: scroll; } a{ color:#a11e22 ;} #friend{height:150px; width:150px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a#open_friends").click(function(){ $("#friend_container, #friends_content").fadeIn(300); }) $("a#close_friends").click(function(){ $("#friend_container, #friends_content").fadeOut(300); }) }) </script> <?php include_once("menu.php"); ?> </head> <body> <div id="container"> <div id="leftside"> <?php require_once("sidebar_left.php"); ?> </div> <div id="content"> <a id="open_friends" href="#"><b>All friends</b></a> <div id="friends_content"> <h2><center>Friends</center></h2> <hr width="90%" color="#a11e22"/> <?php echo "$friend"; ?> <br/> <b><center><a id="close_friends" href="#">Close</a></center></b> </div> <div id="friend_container"> </div></div> </div> <div id="footer" align="justify"> <?php include_once("scripts/copy.php"); ?> </div> </body> </html> Hey guys, I'm new to the forum and thought I should sign up to learn a little more. I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images... http://www.weareunit.com/index.php?p=3D Thanks Does anyone know why Lightbox images would be displaying in reverse order? The numbers are correct but it pops up on the last one and I have to hit previous to get to the front.
|