BebeSaiyan Ответов: 1

Как измениться ASP.NET управление изображениями с помощью javascript/jquery?

В основном я хочу сделать следующее: Когда я нажимаю на изображение в элементе управления ASP image под названием "subImage", фотография должна отображаться в другом элементе управления asp image под названием "brandImage". Проблема в том, что когда я нажимаю на подизображение, ничего не происходит. Я пытаюсь добиться этого эффекта с помощью javascript и jquery. Вот код aspx и jquery:

Что я уже пробовал:

<div id="thumbnailWrapper">
<button id="prev" class="portfolioNavigation">Previous</button>
<div id="container">
<ul id="imageList">
<li>

<asp:Repeater ID="Repeater3" runat="server" 
OnItemDataBound="subImages_ItemDataBound" ItemType="thumbnailImage" 
SelectMethod="GetThumbnail"> 
<ItemTemplate>
<asp:Image ID="subImage" runat="server" ImageUrl='<%# Item.subimages %>' 
CssClass="subPicStyle"/>
</ItemTemplate>
</asp:Repeater>

</li>
</ul>
</div>

<button id="next" class="portfolioNavigation">Next</button>
<script src="../Javascript/thumbnailNavigation.js"></script>
<script src="../Javascript/thumbnailSelection.js"></script>
</div>

<div class='guitarItemsDetailsImage'>
<asp:Image ID="brandImage" runat="server" ImageUrl='<%# Item.itemimage2 %>' 
height="900px" width="370px" />
</div>


var imgSrc = document.getElementById("<%=subImage.ClientID %>").src;
$(function () {
   $("#<%= subImage.ClientId %>").on("click", function (e) {
   e.preventDefault();
   $("#<%= brandImage.ClientId %>").attr("src", imgSrc);
   $("#<%= subImage.ClientId %>").attr("disabled", "disabled");
  });
});

1 Ответов

Рейтинг:
7

F-ES Sitecore

Ваш ретранслятор будет иметь несколько изображений так на какое изображение вы думаете это будет ссылаться

var imgSrc = document.getElementById("<%=subImage.ClientID %>").src;


Первый? Последний? Вам нужно знать, какое изображение нажато, поэтому вам нужно добавить событие щелчка ко всем возможным изображениям. Есть много способов сделать это, ниже я добавил атрибут "data-image", чтобы указать, какие изображения вы хотите иметь возможность нажимать.

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <asp:Image ID="subImage" runat="server" data-image ImageUrl='<%# Container.DataItem %>' CssClass="subPicStyle"/>
    </ItemTemplate>
</asp:Repeater>

<div class='guitarItemsDetailsImage'>
<asp:Image ID="brandImage" runat="server" ImageUrl='' 
height="900px" width="370px" />
</div>

<script>
    $(document).ready(function () {
        // get all images
        var images = $("[data-image]");
        images.click(function (e) {
            e.preventDefault();
            // get the image that's been clicked on
            imgSrc = $(this);

            // update brandImage to have the same src as the clicked image
            $("#<%= brandImage.ClientID %>").attr("src", imgSrc.attr('src'));

            // enable all images
            images.attr("disabled", false);

            // disable the clicked image
            imgSrc.attr("disabled", "disabled");
        });
    });
</script>

BebeSaiyan

Я see..my главная цель состоит в том, чтобы изображения автоматически знали, к чему они будут относиться. Это решение интересно, я попробую его, когда вернусь домой. Но у меня есть вопрос, находятся ли данные-изображение и ImageUrl на одной линии? или это просто опечатка?

F-ES Sitecore

Не важно, что они на одной линии. Важно добавить атрибут data-image, вы можете использовать существующий тег asp:Image и просто добавить этот атрибут к нему.