Jquery Selectable :
Use the mouse to select elements, individually or in a group.
we have using jquery cdn path for css and js files.
suppose you need more infomartion please go to this link http://jqueryui.com/selectable/
we are special thanks To Jquery. visit http://www.jquery.com/
suppose you need more infomartion please go to this link http://jqueryui.com/selectable/
we are special thanks To Jquery. visit http://www.jquery.com/
Please copy the whole html code to your php file.
run the localhost or your server.display output like as output1 and output2.
jquery_selectable.php :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
#seat_images .ui-selecting { background: #FECA40; }
#seat_images .ui-selected { background: #F39814; color: white; }
</style>
<script>
$(function() {
$("#seat_images").selectable({
filter: "td.clsel_st",
distance: 1
});
});
</script>
</head>
<body>
<table width="200" border="1" cellspacing="1" cellpadding="1" id="seat_images">
<tr>
<th scope="col"> </th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col">10</th>
<th scope="col">11</th>
</tr>
<tr>
<th scope="row">A</th>
<td class="st_st" rel="A:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:2"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:3"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:4"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:5"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:7"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:8"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:9"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:10"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="A:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
<tr>
<th scope="row">B</th>
<td class="st_st" rel="B:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="B:2"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="B:3"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="B:4"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="B:5"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="st_st" rel="B:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="B:7"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="B:8"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="B:9"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="B:10"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="st_st" rel="B:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
<tr>
<th scope="row">C</th>
<td class="st_st" rel="C:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="C:2"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="C:3"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="C:4"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="C:5"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="st_st" rel="C:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="C:7"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="C:8"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="C:9"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="C:10"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="st_st" rel="C:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
<tr>
<th scope="row">D</th>
<td class="st_st" rel="D:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="D:2"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="D:3"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="D:4"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="D:5"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="st_st" rel="D:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="D:7"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="D:8"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="D:9"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="D:10"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="st_st" rel="D:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
<tr>
<th scope="row">E</th>
<td class="st_st" rel="E:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="E:2"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="E:3"> <img src="http://your.websites.com/images/Seat-3.png" width="43" height="43" alt="fancy"> </td>
<td class="clsel_st" rel="E:4"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="E:5"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="st_st" rel="E:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="clsel_st" rel="E:7"> <img src="http://your.websites.com/images/Seat-4.png" width="43" height="43" alt="Single"> </td>
<td class="clsel_st" rel="E:8"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="E:9"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="clsel_st" rel="E:10"> <img src="http://your.websites.com/images/Seat-6.png" width="43" height="43" alt="Triple"> </td>
<td class="st_st" rel="E:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
<tr>
<th scope="row">F</th>
<td class="st_st" rel="F:1"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:2"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:3"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:4"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:5"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:6"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:7"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:8"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:9"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:10"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
<td class="st_st" rel="F:11"> <img src="http://your.websites.com/images/cor3.png" width="43" height="43" alt="Pathway"> </td>
</tr>
</table>
</body>
</html>
Output 1:(Before selected images)
Output 2:(After selected images)
Please take the following images :
cor3.png :
Seat-3.png
Seat-4.png
Seat-6.png
No comments:
Post a Comment