Wordpress Rastgele Resim Gösterme (Javascript Kodu ile Rastgele Resim Oluşturma)
Wordpress Rastgele Resim Gösterme (Javascript Kodu ile Rastgele Resim Oluşturma)
Bir süredir tıklanınca değişen rastgele resim gösterme uygulaması, Wordpress eklentisi arayışlarındaydım. Wordpress için slayt şeklinde rastgele değişen resim eklentisi mevcut. Ancak bunların üzerinde bir kontrolünüz yok. Benim istediğim ise tıklandığında değişmesi idi. Ne yaptıysam bu tarz bir eklenti bulamadım.
Sonunda bunu html, PHP veya Js (JavaScript) koduyla nasıl yapabileceğimi araştırmaya başladım. PHP kodu ile denedim. (O kodu da daha sonra paylaşırım belki) Ancak pek beğenmedim. Nihayet tam istediğim gibi işimi görecek bir JavaScript kodu buldum. Sizlerle bulduğum Rastgele Değişen JavaScript Resim Galerisi Kodları’nı paylaşıyorum. (Keşke Bilgisayar Programcılığı okusaydım. 😊 O zaman kodu kendim yazabilirdim.)
Kodlar Tumblr üzerinde birbirine giriyor. Bir şey anlamak çok zor. Yazının aslına aşağıdaki linkten ulaşabilirsiniz. Yine de kodu aşağıya ekliyorum. Ancak Konu'nun tam anlatımı instapostpanel sitesinde yapılmıştır. Ayrıca sayfada kodun nasıl çalıştığını görebileceğiniz bir örnek de yer almaktadır.
https://instapostpanel.com/teknoloji/wordpress-rastgele-resim-gosterme-javascript-kodu-ile-rastgele-resim-olusturma/
Wordpress Rastgele Resim Gösterme (Javascript Kodu ile Rastgele Resim Oluşturma) Bir süredir tıklanınca değişen rastgele resim gösterme uygu
/** Script Title: Wordpress Rastgele Resim Uygulama Örneği [configurable via array] Script Author: Raymond Angana as first seen on devppl.com/forum [username = rangana] Date Created: 3/4/09 This notice must stay intact for legal use */ var ray = { imgs: [ ['/deck/card1.jpg','http://instapostpanel.com/deck/card1.jpg'], ['/deck/card2.jpg','http://instapostpanel.com/deck/card2.jpg'], ['/deck/card3.jpg','http://instapostpanel.com/deck/card3.jpg'], ['/deck/card4.jpg','http://instapostpanel.com/deck/card4.jpg'], ['/deck/card5.jpg','http://instapostpanel.com/deck/card5.jpg'], ['/deck/card6.jpg','http://instapostpanel.com/deck/card6.jpg'] ['/deck/card7.jpg','http://instapostpanel.com/deck/card7.jpg'] ], getID:function(el) { return document.getElementById(el); }, randomPic:function (el) { var aTag = this.getID(el); var rand = Math.floor(Math.random()*this.imgs.length); var imgSrc = aTag.innerHTML.split('src="')[1].split('"')[0]; aTag.href = this.imgs[rand][1]; aTag.getElementsByTagName('img')[0].src = this.imgs[rand][0]; } } </script> <a id="picturelink" href="#"><img src="/deck/0.jpg" name="picture"></a> <input type="button" value="Kart Seçin" onclick="ray.randomPic('picturelink')">
Makale intapostpanel.com sitesinde yer almaktadır. Makalede kodu nasıl kullanabileceğiniz ile ilgili bir örnek de bulunmaktadır. Buradan ulaşabilirsiniz.