Изменение изображения при щелчке с помощью переключателя JS-переключателя Bootstrap

Я использую последнюю версию Bootstrap, и я хочу использовать переключатель javascript для изменения двух изображений.Изменение изображения при щелчке с помощью переключателя JS-переключателя Bootstrap

У меня есть два изображения, скажем, Image1 и Image2. Внизу я хочу использовать переключатель с двумя параметрами; «Показать изображение1» и «Показать изображение2». Изображение1 должно отображаться как значение по умолчанию. Когда я нажимаю «Показать изображение2», изображение 1 должно исчезнуть и заменить на Image2, если после этого нажать «Показать изображение1», изображение 1 должно быть показано снова.

Появление должно быть что-то вроде этого: http://i.solidfiles.net/246a3403cb.png

Можно ли сделать это с помощью HTML/CSS/JS? Я был бы очень признателен, если бы кто-нибудь смог сделать JS Fiddle и объяснить, как это сделать наилучшим образом. Использование CSS/HTML хак не чувствует себя, как хороший способ делать это ...

Twitter Bootstrap Radio Button (Прокрутите вниз до «Радио»)

источник

2013-08-02 user2646903

Вы хотите знать, если это возможно «дисплей/шоу» веб-контента OnClick? Не могли бы вы нанять кодера (http://www.codehire.com/)? Между тем, я приглашаю вас прочитать http://stackoverflow.com/help, чтобы убедиться, что ваш вопрос не будет отменен. –

Я знаю, что это возможно. Интересно, как это сделать наилучшим образом. Я могу сделать это так, как я считаю плохо, с HTML и CSS с помощью и флажком. Поэтому мой вопрос заключается в том, как сделать это с помощью javascript и переключателя начальной загрузки! – user2646903

Почему вы не показываете, это * плохой способ сделать это, и, возможно, мы можем пойти оттуда – user20232359723568423357842364

Вот jsfiddle

разметки изображений, и скрыть второй. Добавить радио btn-groupfrom your link

<div> 
    <img src="http://www.google.com/images/icons/product/chrome-32.png" title="image 1" alt="image 1" id="image1" class="image-toggle" /> 
    <img src="http://www.google.com/images/icons/product/search-32.png" title="image 2" alt="image 2" id="image2" class="image-toggle" style="display:none;" /> 
</div> 
<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary image-toggler" data-image-id="#image1"> 
    <input type="radio" name="options" id="option1"> Show Image 1 
    </label> 
    <label class="btn btn-primary image-toggler" data-image-id="#image2"> 
    <input type="radio" name="options" id="option2"> Show Image 2 
    </label> 
</div>

После включения ваших JS, добавьте этот

<script> 
    $('.image-toggler').click(function(){ 
     $('.image-toggle').hide(); 
     $($(this).attr('data-image-id')).show(); 
    }) 
</script>

источник

2013-08-02 19:06:36 user20232359723568423357842364

Большое спасибо! Это именно то, чего я хотел. Он реализован и отлично работает (http://i.solidfiles.net/65e860d632.png нет стиля). – user2646903

Похоже на то, что мне нужно на JFiddle, но не работает над моим кодом ... Я скопировал и вставил скрипт в голову моего .html-файла. все компоненты бутстрапа включены. Отображается первое изображение, но переключатель никогда не бывает ... – Jack

Поскольку вы используете Bootstrap, то я хотел бы предложить вам попробовать сделать это с карусели Bootstrap.

посмотреть здесь:

Вы можете увидеть

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
    <span class="icon-next"></span> 
    </a>

атрибут data-slide может быть использован на якорях, и они ссылаются на data-target, смотрите пример Bootstrap. Это может работать как-то на переключателях Bootstrap, они просто html-переключатели. Кстати, так как это нужно для привязки к изображению, моя ставка - вам придется называть это самостоятельно.

Я предлагаю вам использовать JQuery и Bootstrap Carousel методы

.carousel('prev') 

Cycles to the previous item. 

.carousel('next') 

Cycles to the next item.

вручную нажатием на кнопки радио .. Я оставлю вас, чтобы попробовать это.

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

Попробуйте некоторые из этих сайтов, чтобы вы начали: http://designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/

источник

2013-08-02 18:57:22 Pricey

Изменение изображения при щелчке с помощью переключателя JS-переключателя Bootstrap

ответ

Смежные вопросы