При нажатии на миниатюру изображение должно отображаться в отдельном разделе.

Question

При нажатии на миниатюру изображение должно отображаться в отдельном разделе.

0

Я хочу, чтобы изображение появилось в отдельном разделе после того, как в приведенном выше разделе щелкнул эскиз изображения.

индексный код:

        <section id="select-image">
        <h2>Step 1. Select an image</h2>
        <p>Select your prefered image</p>
        <div id="ug-images"><img src="/images/ugimage1.jpg"></div>
    </section>
    <section id="add-text">
        <h2>Step 2. Add Text</h2>
        <input id="text" type="text" value="Customise me!">
    </section>
    <section id="style-image">
        <h2>Step 3. Style it!</h2>
        <div id="workspace">

Код javascript:

    $(document).on('click', '#ug-images', function() {
  var url = $(this).data('url');
  $("#workspace img").remove();
  var img = $("<img>").attr('src', url);
  $("#workspace").append(img);
});

Быть ясным. Я хочу, чтобы эскиз, выбранный в id = Select-image, отображался в id = workspace

JamesJY 23 сен. 2013, в 19:24

Источник

Теги:

javascript

jquery

html

5 ответов

0

<script>
jQuery(document).ready(function(){
    jQuery("#ug-images").click(function(){
        $("#workspace img").remove();
        var url = $(this).find('img').attr('src');
        alert(url);
        $('#workspace').html('<img  src="'+url+'" />')
    });
});
</script>

Ankit Agrawal 23 сен. 2013, в 15:39

0

Попробуй это

Если вы хотите показать только выбранное изображение

DEMO

 $(document).on('click', '#ug-images', function() {
 var img = $(this).find('img').clone();
 $("#workspace").html(img);
});

или Если вы хотите добавить каждое изображение, которое вы нажали

DEMO

$(document).on('click', '#ug-images', function() {
 var img = $(this).find('img').clone();
 $("#workspace").append(img);
});

SarathSprakash 23 сен. 2013, в 15:20

0

Вам не нужно иметь дело с атрибутом URL. Вы можете клонировать выбранное изображение и добавлять его в "#workspace"

$(document).on('click', '#ug-images', function () {
  var $newImg = $(this).clone();
  $('#workspace').append($newImg);
});

Посмотрите здесь: http://jsfiddle.net/7jSkx/

Caner Akdeniz 23 сен. 2013, в 14:58

0

что-то вроде этого? http://jsfiddle.net/fSyPp/

$(document).on('click', '#ug-images', function () {
    var url = $(this).attr('src');
    $("#workspace img").remove();
    var img = $("img").attr('src', url);
    $("#workspace").append(img);
});

Chanckjh 23 сен. 2013, в 13:53

Ещё вопросы

banzomaikaka · Accepted Answer · 2013-09-23T13-57-00.000Z

Вы можете просто создать копию изображения и добавить его в рабочее пространство

var $workspace = $('#workspace'), //simply caching the selector
    $img = $();

$('#ug-images').on('click', 'img', function () {
    $img.remove();
    $img = $(this).clone().appendTo($workspace);
});

Вот демо: http://jsfiddle.net/FpsLJ/