Advertisement
Guest User

Untitled

a guest
Jan 17th, 2017
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.72 KB | None | 0 0
  1. <div id="row1" class="row">
  2. <img class="productimg"
  3. src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
  4. data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg"
  5. data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
  6. data-name="Name1-1" data-price="8,50">
  7. <img class="productimg"
  8. src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
  9. data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg"
  10. data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
  11. data-name="Name1-2" data-price="11,50">
  12. <span class="productinfo"></span>
  13. </div>
  14. <div id="row2" class="row">
  15. <img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-name="Name2-1" data-price="8,50">
  16. <img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-name="Name2-2" data-price="11,50">
  17. <img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-name="Name2-3" data-price="17,50">
  18. <img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-name="Name2-4" data-price="19,50">
  19. <span class="productinfo"></span>
  20. </div>
  21. <style>
  22. .productinfo {
  23. display: inline-block;
  24. width: 200px;
  25. height: 200px;
  26. vertical-align: top;
  27. }
  28. </style>
  29. <script>
  30. var imglocked = "http://lorempixel.com/output/technics-q-g-200-200-5.jpg";
  31. var tolock = {
  32. // +-- Index des geklickten Bildes in der 1. Zeile
  33. // | +-- Index der Folgezeile
  34. // | | +-- Index des 1.zu sperrenden Bildes
  35. // | | | + --Index des 2. zu sperrendes Bildes
  36. // | | | |
  37. 0: { 1: [0, 2] },
  38. 1: { 1: [1, 3] }
  39. };
  40. var rows = $("div.row");
  41. $(".productimg").on("click", function () {
  42. if ($(this).attr("data-locked") != "true") {
  43. var lock = false;
  44. if ($(this).hasClass("active")) {
  45. $(this).removeClass("active");
  46. $(this).attr("src", $(this).attr("data-src"));
  47. $(this).siblings("span.productinfo").html("");
  48. } else {
  49. lock = true;
  50. var selimg = $(this).siblings(".productimg.active");
  51. selimg.attr("src", selimg.attr("data-src")).removeClass("active");
  52. $(this).addClass("active");
  53. $(this).attr("src", $(this).attr("data-src-sel"));
  54. var htm = $(this).attr("data-name") + "<br>";
  55. htm += $(this).attr("data-price");
  56. $(this).siblings("span.productinfo").html(htm);
  57. }
  58. var ctolock = tolock[$(this).index()];
  59. rows.each(function (irow) {
  60. if (irow > 0) {
  61. var row = $(this);
  62. $(this).children(".productimg").each(function (iimg) {
  63. if (ctolock[irow].indexOf(iimg) != -1 && lock) {
  64. $(this).attr({ "src": imglocked, "data-locked": "true" });
  65. } else {
  66. $(this).attr({ "src": $(this).attr("data-src"), "data-locked": "false" });
  67. }
  68. });
  69. }
  70. });
  71. }
  72. });
  73. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement