Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
bir sayfanın html kodunu kopyaladım ama çalışmadı Neden?
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
Sayfanın html kodu şu şekilde: Üsteki linkte çok hoş görünüyor. Ama benim sayfada boş görünüyor. NEDEN ACABA?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Resim Galerisi</title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
<h1>RESiMLERiM</h1>
<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" />
</a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
<li>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=#" data-href="#"><img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" alt="description" class="preview" width="200" height="150" /></a>
</li>
</ul>
<p id="footer">< Önceki Albüm] <b><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=10665561&url=http://www.fatihtopcu.com" data-href="http://www.fatihtopcu.com"><u>[Anasayfa]</u></a></b> [ Sonraki Albüm ></p>
</body>
</html>
-
Resimleri sakıncası yoksa upload et, senin yerine güzel bir galeri yapayım ( Bunlardan daha güzel olacağına garanti veririm ) sakıncası var ise söyle başka bir alternatif bulalım 
Bu arada kodlarda hiç sorun yok. Ayrıca çok basit, muhtemel bir yerlerde hata yapıyorsundur :) -
Neyse resimler önemli galiba Kodları sizin için düzenledim.
Resimlerin bulunduğu yol //images
Resimlerin tümünün adı // photo01 ( resim adlarına göre değiştirin
Resimlerin alt açıklaması //ÖrnekAçıklama ( burada boşluk vermeyin eğer boşluk verirseniz değeri alt=ÖrnekAçıklama yerine alt="Örnek Açıklama" yapın.
Resimleri üzerine tıklandığında ( Bu mecbur çünkü ahover kullanılmış eğer link vermek istemiyorsanız bu hali ile bırakın ) // <a href="#">
Ekleme:
Css dosya yolları //images gerekiyor ise değiştirin
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<HEaD><TITLE>Hoverbox Image Gallery</TITLE>
<METa http-equiv=content-type content="text/html; charset=utf-8">
<liNK media="screen, projection" href="images/hoverbox.css" type=text/css rel=stylesheet>
<!--[if IE]><liNK media="screen, projection" href="images/ie_fixes.css" type=text/css rel=stylesheet>
<![endif]-->
<METa content="MSHTML 6.00.2900.2180" name=GENERaTOR></HEaD>
<BODY>
<H1>Resim Galerisi</H1>
<UL class=hoverbox>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo07.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
<li><a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a> </li>
</UL></BODY></HTML>
< Bu mesaj bu kişi tarafından değiştirildi X Files -- 27 Kasım 2006; 20:27:46 >
-
Teşekkür ederim bir deneyeyim. Resimler özel resimler değil. Mesajı yeni gördüm. web sitemde yayınlayacağım için fazla önemli değil. image klasöründeki resimleri photo01.jpg , photo02.jpg diyeceğiz sanırım. Ama neden satırlarda her photo01.jpg diyorsunuz? Yoksa burada resmin görüntüleneceği ilk boyut, alt satırda ikinci boyutu mu belirtiliyor? -
Yukarıdaki kodları kopyaladım. Gerekli değişiklikleri yaptım. Resimler internet sayfasında bir küçük ve bir büyük görüntüleniyor. En iyisi ben resimleri bu haliyle web sayfasına göndereyim. Dün mesaj yazan arkadaş hayrına sayfayı düzenler herhalde. -
Sevgili Hayatboş,
Aslında bu galeriyi daha önceden incelemiştim.
Birincisi galeri Madde İşaretlendirme ve numaralandırma şekilde yapılmış. Yani Css Tab Menülerdeki temel alınarak kullanılmış. Diğer bir özellikte ahover yani linkin üzerine geldiğince ön izleme prensibi var.
Şimdi geçelim Kodların anlamlarına.
<a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a>
<a href="#"> Burada link mevcut. Link koymak şart değil ama mecbur link olacak dedikya önizleme yapabilmek ve ahover ı işletebilmek için link koyuyoruz. Buradaki diyez işareti aslında target ın yani hedef yolun olmadığı anlamına geliyor. eğer resimin büyüğdüğü zaman üzerine tıkladığımız da her hangi bir link vermek istiyorsak buraya tam bir yol yazmamız gerekli ( Diyez işaretini silmemiz gerekiyor )
<img alt=ÖrnekAçıklama src="images/photo01.jpg"> Burası önizleme yaptığımızda gelecek olan resimin adresi. Dikkat etti isen resimlerin boyutları felan yok. buda çağırılacak resimin hosta kolulan halde çağıracak.
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150>
Buradaki sayfa görüntülendiğinde gözükecek resim. Css kodlarının içerisinde bu bölüme prewiev olarak adlandırılmış. ama yukarıda dediğim prewiev ile karıştırma. Sayfada gözüken boyutlar genişlik 200 yükseklik 150. Tüm rersimleri bu şekilde boyutlandırmak gerekiyor mu ? aslında hem eve t hem hayır, Css içinde de ayarlayabilirsin.
Ben neden sürekli images\photo01 yazdım ?
Aslında sayfa için örnek yapmıştım yükleyecektim. 15 satır için 15 değişik resim koymak gerekiyordu buda pek işime gelmedi doğrusu. O yüzden sürekli aynı kodları yazarak sayfada bütünlük sağlamaya çalıştım...
<a href="#"><img alt=ÖrnekAçıklama src="images/photo01.jpg">
<img class=preview alt=ÖrnekAçıklama src="images/photo01.jpg" width=200 height=150></a>
Her fotoğrafı değiştirmek için her iki kodda da yani photo01 lerin 2 sinide değiştirmen lazım. Çünkü 1 tanesi önizlede gözüken diğeri mousela üzerine geldiğinde görüntülenecek olan resim.
Aslında daha iyi bir sonuç için resimleri değiştirebiliriz. Mesela diyelimki 1024 e 768 15 tane resmimiz var. bunlara ayrı Thumbnail hazırlayıp ayrıca önizleme için konulabilir. O zamanda atıyorum linkin bir tanesi ( Resim yolunun bir tanesi ) thumb01 diğeri photo01 gibi olabilir.
Daha fazla ayrıntı istersen pek te fazla anlatacak bir şey kalmadı...
Birde ben ilk mesajını gördüm bunları yazarken malum iş saazti oraya buraya derken sen 2. yi yazmışsın..
Sen gönder ben sana sayfayı yaparım
-
test test
test test
quote:
Orjinalden alıntı: winix
test test
test testtest test
test test
< Bu mesaj bu kişi tarafından değiştirildi fatihto -- 22 Ocak 2021; 0:19:16 > -
Teşekkür ederim. Senin yaptığın sayfanın beğenilip html kodlarının kopyalanması güzel değil mi? Sonuçta benim sayfamda kendime ait resimler olacak. Resim arşivini isteyen arkadaşa şu linki vereyim. Resim sayfama bu resimleri koyacağım. Bakalım yardımcı olabilecek misiniz?
Fatih arkadaşın resim sayfasını biliyorsunuz. O gibi olabilir ya da daha başka şekilde olabilir. Ben aşağıdaki sayfayı exelde resim ekleyip html olarak kaydettim. Önemli olan oradan resimleri almanızdır.
http://www.kenanelmas.5u.com/resimlerim.htm -
Yanlız resimlerin yokmu ? Bu resimlerden pekte bir şey yapılmaz yapılsada pek güzel olmaz :( Üzerlerinde çok uzun çalışmak lazım. )
Mesela resimlerinin orjinallerini hiç bir şekilde editlemeden ( istediklerini ) bir klasörün içine koysan sonra rar yada zip haline getirsen sonrada bir yere upload etsek; sonrada sana güzel bir galeri hazırlasak olmaz mı ? -
nereye upload edeyim?
winzıp ile tek bir dosya olarak gönderebilirim ama NEREYE? -
quote:
Orjinalden alıntı: HayatBoş
test test
test test
test test
test testtest test
< Bu mesaj bu kişi tarafından değiştirildi fatihto -- 22 Ocak 2021; 0:19:40 > -
quote:
Orjinalden alıntı: HayatBoş
nereye upload edeyim?
winzıp ile tek bir dosya olarak gönderebilirim ama NEREYE?
R a p i d s h a r e . com olabilir, yada bir başka upload sitesi :) -
evet işte link:http://r a p i d s h a r e . c o m /files/5205211/resim.zip
Web sitesinin ilk sayfasına bir resim koydum. Bu resmin belirli aralıklarla değişmesini ve 4-5 değişik resim görülmesini nasıl sağlayabilirim. -
İlk önce galeri işini halledelim sonra onada bakarız
Edit : 1
Hoverbox...
http://rapidshare.com/files/5217153/hoverbox.rar.html
r a p i d s h a r e
Paketin içinde txt dosyası var. O herhangi bir işe yaramıyor. Sadece örnek kodlama. Olurda sayfanın başına bir şey gelirse diye. :)
Edit 2
Monoslide ( poweruser0 a teşekkürler :) .....
http://rapidshare.com/files/5217994/Monoslide.rar.html
r a p i d s h a r e
Html kod içinde ki bu bölümden 520 ye 400 olan ölçüyü değiştirebilirsin.
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("monoslideshow.swf", "SOmonoSlideshow", "520", "400", "7", "#ffffff");
so.write("monoSlideshow");
// ]]>
</script>
< Bu mesaj bu kişi tarafından değiştirildi X Files -- 28 Kasım 2006; 22:21:36 >
-
Teşekkür ederim arkadaşım. Elleriniz dert görmesin. Üzerine gelinen resimlerin normal boyutta görünmesi daha güzel olmuş. İlgilenen arkadaşlar bakabilirler. -
quote:
Orjinalden alıntı: X Files
test test
test test
test test
< Bu mesaj bu kişi tarafından değiştirildi fatihto -- 22 Ocak 2021; 0:20:2 > -
...
edit: lüzumsuz bi yazı oldu.
< Bu mesaj bu kişi tarafından değiştirildi fatihto -- 29 Kasım 2006; 17:38:51 > -
web sitesi ile uğraşan arkadaşlar, hazırladığınız sayfada kullandığınız şablonları buraya yazarsanız daha yararlı olur düşüncesindeyim. Bakın winix ve x files arkadaşların yaptığı düzenlemeden birçok arkadaş faydalanabilir. Klasör içine manzara resimleri konularak albüm oluşturulmuş. Sizin tek yapmanız gereken doğa resimleri yerine kendi resimlerinizi koymak. Aynı şekilde bir ana sayfa tasarımı olsa da onu da kullanabilseydik KEŞKE. :) -
quote:
Orjinalden alıntı: winix
Ben burada css dosyalarıda dahil atıp bi paylaşım sitesinden aktarırım size, ama akşam geç gidebilirim eve.. hem beğenenler de kullanabilir böylece.. Hoverbox die bi atraksiyon ordaki, yine burdan kim olduğunu hatırlayamadığım bir arkadaş vermişti linkini bana da, topiğin linki de burda, ordan bakabilirsin..;
http://forum.donanimhaber.com/m_10389630/mpage_1/key_//tm.htm#10410237
işte burada da bu galeri için kritik açıklama;
quote:
Orjinalden alıntı: winix
çok seyrek uğradığım başka bir forumdan "eburhan" adında bir arkadaştan eglen cevap;
"İstediğin galerinin aynısıhttp://host.sonspring.com/hoverbox/ adresinde var. İndirmek içinhttp://sonspring.com/journal/hoverbox-image-gallery adresini kullanabilirsin."
arkadaşın dediği gibi, "CUK" diye bir ses geldi resmen soruma..
netekim dün akşamda hemen ekledim siteme.. eminim bu tarz bişi isteyen arkadaşlara faydalı olur bu arkadaşın verdiği iki link.
Cevap atan herkese teşekkürler, Saygılarımla
Dün yazacaktım aslında buna bir cevap, Howerbox ile dediğiniz aynı şey değil diye.
Bahsedilen script Templatesmonster.com ( site adı yanlış yazmış olabilirim ) daki templates ları göstermek için Javascript.Com dan alınan bir kod ile loader.js in beraber kullanıldığı bir scrpit.
Dün akşam hadi oldu olacak dedim ve uykumdan biraz daha feragat ederek konuyu araştırdım. Biraz bilgiler edindikten ve araştırmalar yaptıktan sonra bugün de TemplatesMonster.Com dan bir sayfa alarak editlemeye başladım. Sayfa bir hayli sadeleşti. Ama üzerinde daha çok çalışılması lazım. Çünkü sayfa hakikaten çok karışıktı. Ne varki preview yaptığımızda resimler için host kullanılmış. Galerinin üzerinde bir kaç ufak daha değişiklik yaptım.
İlk üç yani üst sıradakiler thumbnail resimlerin üzerine tıklanınca görüntüleniyor. Bunu da senin daha önce verdiğin konuda hatırlarsanız ne olacak onmouseover ı onclick yapın yeter dediğim için denedim.
Css kodları nı hiç sadeleştirmedim, hiç bir yerinde Türkeleştirme felan yapmadım.
Bu hali ile bakmak isteyenler için bir upload edeyim. Açıkçası bundan daha ileriye götürmeye pek niyetim yok yani galeriyi daha fazla editlemeyi, sadeleştirmeyi yada şekillendirmeyi pek düşünmüyorum...
http://rapidshare.com/files/5284229/showimage.rar.html
R a p i d s h a r e
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
