JavaScript - Sortable Images & Lightbox

Hello Everyone,

I am facing problem with divs indexes persistancy on sorting when browser refreshing. checkout this fiddle once and help me.

Sortable-arindam - JSFiddle

Here how can i maintain the divs persistancy on sorting when page refreshing.

Thanks in Advance

Satish Chandragiri

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.

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

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, 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.

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 -->

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

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 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?

I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation?

I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas?

Thank you,

Dustin

Hi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell

You can view a test page here
http://www.spmcreative.co.uk/patrickedward/gallery.html

(only the first thumbnail is clickable)

I have attached some code below, please let me know if you need to see any more,


Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>

  <link rel="stylesheet" href="CSS/style.css" type="text/css" />
  <link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
  <link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
	background-image: url(img/MainBG.gif);
	background-repeat: repeat;
}
a:link {
	color: #999;
	text-decoration: none;
	border:0;
}
a:visited {
	text-decoration: none;
	color: #999;
	border:0;
}
a:hover {
	text-decoration: none;
	color: #000;
	border:0;
}
a:active {
	text-decoration: none;
	border:0;
}
</style>
</head>


<body>

  <div id="container">
    <div id = "header">
     <div class = "logo">
      <a href="index.html">
        <img src="img/logo.png" alt ="Patrick Edward Diamonds" />
       </a>
        </div>
      
      <ul id="nav">
        <li><a href="index.html"> Home |</a></li>  
        <li><a href="collections.html"> Collections |</a></li> 
        <li><a href="design.html"> Design Service |</a></li> 
        <li><a href="trade.html"> Trade Service |</a></li> 
        <li><a href="gallery.html"> Design Gallery |</a></li>
        <li><a href="contact.html"> Contact Us</a></li>  
      </ul>
    
    </div> <!--end of header-->
    
     <div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="img/reel_1.jpg" alt="" /></a>
            <a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
            <a href="#"><img src="img/reel_3.jpg" alt="" /></a>
            <a href="#"><img src="img/reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
        <a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
        <a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
        <a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
    </div>
    </div> <!--end of banner--> 
        
     <div id="main1">
     <p><img src="img/gallery.png" alt="Gallery" /></p>
     <div class="album">
    <div class="imageSingle">
        <div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>
    </div>

Thanks,
Simon

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.

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>