Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="row1" class="row">
- <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="Name1-1" data-price="8,50">
- <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="Name1-2" data-price="11,50">
- <span class="productinfo"></span>
- </div>
- <div id="row2" class="row">
- <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">
- <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">
- <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">
- <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">
- <span class="productinfo"></span>
- </div>
- <style>
- .productinfo {
- display: inline-block;
- width: 200px;
- height: 200px;
- vertical-align: top;
- }
- </style>
- <script>
- var imglocked = "http://lorempixel.com/output/technics-q-g-200-200-5.jpg";
- var tolock = {
- // +-- Index des geklickten Bildes in der 1. Zeile
- // | +-- Index der Folgezeile
- // | | +-- Index des 1.zu sperrenden Bildes
- // | | | + --Index des 2. zu sperrendes Bildes
- // | | | |
- 0: { 1: [0, 2] },
- 1: { 1: [1, 3] }
- };
- var rows = $("div.row");
- $(".productimg").on("click", function () {
- if ($(this).attr("data-locked") != "true") {
- var lock = false;
- if ($(this).hasClass("active")) {
- $(this).removeClass("active");
- $(this).attr("src", $(this).attr("data-src"));
- $(this).siblings("span.productinfo").html("");
- } else {
- lock = true;
- var selimg = $(this).siblings(".productimg.active");
- selimg.attr("src", selimg.attr("data-src")).removeClass("active");
- $(this).addClass("active");
- $(this).attr("src", $(this).attr("data-src-sel"));
- var htm = $(this).attr("data-name") + "<br>";
- htm += $(this).attr("data-price");
- $(this).siblings("span.productinfo").html(htm);
- }
- var ctolock = tolock[$(this).index()];
- rows.each(function (irow) {
- if (irow > 0) {
- var row = $(this);
- $(this).children(".productimg").each(function (iimg) {
- if (ctolock[irow].indexOf(iimg) != -1 && lock) {
- $(this).attr({ "src": imglocked, "data-locked": "true" });
- } else {
- $(this).attr({ "src": $(this).attr("data-src"), "data-locked": "false" });
- }
- });
- }
- });
- }
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement