Question : toggle visibility of <div> in galleria.js

I'm creating an image gallery using Galleria. On each image, there is an "i" button at the top left, that when clicked, reveals a <div> containing text. The div stays open until the user clicks anywhere inside it. Instead, I want the div to stay open until the "x" in the corner is clicked only. That way, the user can select the checkbox without it disappearing each time.

Link: http://uat.govquestonline.com/galleria/demos/classic-02.html

I've attached a link, and coding for both galleria.js and galleria.classic.js

Thanks 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:

<!DOCTYPE html>
<html lang="sv">
    <head>
        <title>Galleria Classic Theme Demo 02</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="../src/galleria.js"></script>
		
        <style>
            html,body{background:#fff}
#galleria, #galleria2{
	width:700px;
	height:500px;
	margin:20px auto; 
}
 a {
color:#aaa;
}

.controller a {
	color:#333;
	font:arial, helvetica, sans-serif;
	text-decoration:none;
	
}
        </style>


<!--LOAD JAVASCRIPT FOR <DIV> CONTENT SWITCHER-->
<script type="text/javascript">

function hidestories() {
var divs=document.getElementById('galleries').getElementsByTagName('div');
for (j=0; j<divs.length; j++) {
var rE = new RegExp("(^|\\s)" + 'gallery' + "(\\s|$)");
if (rE.test(divs[j].className)) {
divs[j].style.display="none";
}
}
}

function stories(first) {
var thebuttons=document.getElementById('galleryControl').getElementsByTagName('a');
for (i=0; i<thebuttons.length; i++) {
thebuttons[i].onclick=function() {
hidestories();
var thestory=(this.href).split("#",2)[1];
document.getElementById(thestory).style.display="block";
return false;
}
}
if (first) {
var firstone=document.getElementById('galleries').firstChild;
if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
firstone.style.display="block";
}
}
window.onload=function() {
hidestories(); 
stories(1);
}

</script>


    </head>
<body>
	<div id="galleries">
    <div id="galleria" class="gallery"  >
		<img src="../src/images/intro.gif">
		<div class="descript">
		<p><input type="checkbox" name="box1" value="value1"> Select</input></p></div>

		<img src="../src/images/cpHome-1.png">
        <div class="descript">
		<p><input type="checkbox" name="box1" value="value1"> Select</input></p></div>

        <img src="../src/images/cpHome-2.gif">
        <div class="descript"><input type="checkbox" name="box1" value="value1"> Select</input><p></p></div>

 		 <img src="../src/images/cpHome-3.gif">
        <div class="descript"><input type="checkbox" name="box2" value="value2"> Select</input><p></p></div>

		  <img src="../src/images/cpHome-4.gif">
        <div class="descript"><input type="checkbox" name="box3" value="value3"> Select</input><p></p></div>

		  <img src="../src/images/cpHome-5.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpHome-6.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpHome-7.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpHome-8.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		


</div>
	<!--gallery 2-->
    <div id="galleria2" class="gallery" >	
		<img src="../src/images/b-basics.gif">	
		<img src="../src/images/cpIntro-1.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpIntro-2.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpIntro-3.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpIntro-4.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>

		<img src="../src/images/cpIntro-5.gif">
        <div class="descript"><input type="checkbox" name="box4" value="value4"> Select</input><p></p></div>
</div>
</div><!--ends GALLERIES-->

<div id="galleryControl" class="controller">
<a href="#galleria">Introduction  </a><br />
<a href="#galleria2">Blogging Basics </a>

</div>





 <!--LOAD GALLERIA -->
    <script>
    
    // Load theme
    Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
    
    // run galleria and add some options
    $('#galleria').galleria({
        image_crop: false,
		popup_links: true,
        transition: 'fade',
        data_config: function(img) {
            return {
                description: $(img).next('div').html()
            };
        }
    });

  $('#galleria2').galleria({
        image_crop: false,
		popup_links: true,
        transition: 'fade',
        data_config: function(img) {
            return {
                description: $(img).next('div').html()
            };
        }
    });



    </script>
    </body>
</html>
Attachments:
 
galleria.classic.js (1 KB) (File Type Details) 
galleria.classic.js
 
 
galleria.js (43 KB) (File Type Details) 
galleria.js
 

Answer : toggle visibility of <div> in galleria.js

My friend figured out a solution. Attached is the modified code he used. Thanks for your comments
Random Solutions  
 
programming4us programming4us