lostyazilim

JS Önceki resmin sabit görüntülenmemesi

2 Mesajlar 454 Okunma
lstbozum
wmaraci reklam

tuyo tuyo WM Aracı Kullanıcı
  • Üyelik 24.03.2016
  • Yaş/Cinsiyet 59 / E
  • Meslek grafik tasarım-webmaster
  • Konum Ankara
  • Ad Soyad U** T**
  • Mesajlar 209
  • Beğeniler 59 / 8
  • Ticaret 0, (%0)

Swap image çalışmasıdır ve kodlar çalışıyor. Fakat başka resme tıklayınca önceki resim gizleniyor görüntülenmiyor. Değişen önceki resmin de sabit kalmasını istiyorum.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
         
        $('.ust').hide()
        $('#' + showme).show()
    })
})
 
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
         
        $('.orta').hide()
        $('#' + showme).show()
    })
})
 
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
         
        $('.taba').hide()
        $('#' + showme).show()
    })
})
</script>
 

 

wmaraci
reklam

OFffLaZZzz OFffLaZZzz WM Aracı Kullanıcı
  • Üyelik 16.06.2023
  • Yaş/Cinsiyet 40 / E
  • Meslek Esnaf
  • Konum Trabzon
  • Ad Soyad M** K**
  • Mesajlar 28
  • Beğeniler 10 / 13
  • Ticaret 0, (%0)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('[data-showme]').on('click', function() {
    var showme = $(this).attr('data-showme');
    var previousImage = $('.active-image'); // Önceki resmi seçer

    // Yeni resmi oluşturur ve etiketlerini ayarlar
    var newImage = $('<img>').attr('src', showme).addClass('active-image');

    // Önceki resmi sabit konumda tutar ve yeni resmi üstüne ekler
    previousImage.css('position', 'absolute');
    previousImage.after(newImage);

    // Yeni resmi animasyonla görünür yapar
    newImage.hide().fadeIn();

    // Önceki resmi gizler
    previousImage.fadeOut(function() {
      $(this).remove(); // Önceki resmi tamamen kaldırır
    });
  });
});
</script>

Bu örnekte, önceki resim özel bir sınıf olan "active-image" olarak işaretlenir. Yeni resim, önceki resmin üzerine eklenir ve animasyonla görünür hale gelirken önceki resim gizlenir. Ardından, önceki resim tamamen kaldırılır.

Bu kodu kullanarak, tıklanan her resim için önceki resmin sabit kalmasını ve üzerine yeni resmin gelmesini sağlayabilirsiniz.

 

 

wmaraci
Konuyu toplam 3 kişi okuyor. (0 kullanıcı ve 3 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al