Home JQuery JQuery Digital Dergi Yapımı
JQuery Digital Dergi Yapımı

JQuery Digital Dergi Yapımı

830
61

Merhaba Arkadaşlar ,bu seferki dersimizde JQuery çalışmasının anlatımını yapacağım. Elimde çok güzel bir jquery çalışması var ve bunu sizinle paylaşmak istedim.

Her zamanki gibi size çalışmayı vereceğim . RAR dan çıkarttığınızda 5adet dosya ile karşılaşacaksınız. Bu dosyalar sırasıyla şöyle 1- Booklet klasörü= jquery kodlar ve derginin yapımında kullanılan resimler bulunmaktadır.      2- Css Klasör= Derginin içinde yer alan yazıların vs. lerin kodlarının bulunduğu klasör 3-Cufon klasörü= Derginin efektlerinin yani javascript dosyalarınının bulunduğu klasör. 4– İmages Klasörü =Dergi içeriğinde yer alan resimlerin bulunduğu klasör. Burdaki resimleri istediğiniz gibi değiştirebilirsiniz. 5.index.html = Derginin  içinde yer alacak yazıları ve linkleri değiştirmek istediğinizde,herhangi bir metin editörüyle açarak düzenleme yapacağınız html dosyasıdır.

Örnek index.html içeriği aşağıdaki gibidir.

<div>
                        <img src="images/1.jpg" alt=""/>
                        <h1>Sayfa-1</h1>
                        <p>Yazi icerigi burada olacak.</p>
                        <a href="#" target="_blank">indir</a>
                        <a href="#" target="_blank">izle</a>
                    </div>

Yukarıda gördüğünüz gibi <div> ile </div> arasındaki yer derginin, her bir sayfasına ait bölümüdür.index.html sayfasına baktığınızda bu etiketlerden birkaç tane göreceksiniz. img src kısmı ise derginin sayfasında bulunan resmin kaynağıdır. Yapmanız gereken resmin adını yazmak ve images klasörüne o resmi koymak olacak.Sonrasında ;h1 etiketinin olduğu yer sayfanın başlığı, p etiketinin olduğu yer  yazı içeriğinin bulunduğu yerdir . <a href bölümü ise tıklandığında gidecek kısımdır.

Anlamadığınız bir yer olursa yorum kısmından bana ulaşabilirsiniz.

Anlatım : Ömer BOZALAN

DemoButton

hemen-indir-butonu

 

(830)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(61)

  1. hocam yine harikalar yaratmışsın, hemde flash olmadan. böylece iphoneda da çalışır.
    eline sağlık

  2. mustafa bey, yapmanız gereken içeriğinizi yukarıdaki anlatıma göre digital dergiye koymak olacaktır. yukarıdaki anlatımda anlamadığınız bir nokta varsa cevap vereyim. diğer türlü sorunuzu tam olarak anlamadım.

  3. Selamlar Hocam verdiğiniz dergi yapım şeması çok güzel yalnız ben birçok yeri halledip bazı yerlerde takılıyorum. mesela yazım dili türkçe kabul etmediğinden sıkıntı oluyor birde indir ve izle olan yerleri ben mesela incele ve siparis ver olarak değiştirdim ama tıklayınca o an gorunen resmı yada inele diyince başka bı sayfada o ürünün detaylarını versin istiyorum mümkünmüdür. biraz uzun oldu kusura bakma.

    1. ahmet bey bu yazı tiplerini değiştirmek istiyorsanız biraz css bilgisine ve html bilgisine sahip olmalısınız. Biz burda bilgimizi sunuyoruz hepsini vermemiz mümkün değil zaten öyle yaparsak öğrenmenizi engellemiş oluyoruz.
      neden mi? herşeye hazır halde ulaşmanız bilgiyi öğrenmeyi aksatır. o yüzden bizde bu bilgiyi, araştırarak bulmanızı veya sormanızı istiyoruz. Asıl öğrenme bu şekilde olacaktır. Bu konuda size yardım edeyim. sorduğunuz içinde teşekkür ederim.
      index.html dosyasını açıyorsunuz.

      < script src="cufon/ChunkFive_400.font.js" type="text/javascript">
      < script src="cufon/Note_this_400.font.js" type="text/javascript">

      satırlarını siliyorsunuz. Bu digital dergi dışarıdan js koduyla yazı tipini alıyor. bu şekilde düzenlediğinizde türkçe yazabilirsiniz.işlemi yaptığınızda buradan haber verin yapıp yapmadığınızı öğrenelim. arkadaşlara da faydanız olur.
      Diğer sorunuzu anlamadım. Açıklayarak sorarsanız sevinirm.

  4. Hocam Çok Teşekkürler Font sorununu çözdüm sayenizde, evet yavaş yavaş öğrenerek ilerlemek istiyorum ama nasıl nerden onu pek kestiremedim ben direk flash la işe koyuldum ama karmakarışık oldu sanırım. bizim bi sitemiz var amacım orayı güzelleştirip kendimce yapmak. kayıt olurken yazmıştım siteyi bi bakarsanız, o dergi imajını buraya uygulamak istiyorum. bu arada az önce anlatmak istediğim şey şuydu hocam. : yani mesela indir yazan yer varya o dijital derginin içinde o ( indir ) yazan yeri ben değiştirip incele olarak yazdım ve müşteri ürünü incele amacıyla tıkladığında farklı bir sayfada o ürüne ait özelliklerinin sergilenmesini yapmak istedim. umarım anlatabilmişimdir bu kez. başınızı ağrıtıryorum kusura bakmayın.

    1. ahmet bey aceleyle html ve css öğrenmeye bakın yoksa habire cevap beklemekle ömrünüz geçecek. 🙂 flash öğrenin ama html css öğrenmeden hiçbirisinden verim alamazsınız. Neyse benden tavsiye. Gelelim sorunuza
      index.html sayfasını açıyorsunuz

      < a href="#" target="_blank" class="demo">izle
      < a href="#" target="_blank" class="demo">izle

      satırlarındaki # işaretinin olduğu yere oluşturmuş olduğunuz sayfanın adını yazıyorsunuz

      ÖRNEK
      < a href="sayfa1.html" target="_blank" class="article">indir

      kolay gelsin.

  5. merhabalar kolaygelsin öncelikle ellerinize sağlık çok güzel paylaşım fakat birkaç sıkıntı var 9 sayfa çok az sayfaları çoğaltmak istediğimdede sayfa yükleniyor hatası veriyor 20-25 sayfaya çıkarılmış hali ile atma şqnsınız yokmu

    1. Sümeyye hanım aslında çoğalıyor. İndex.html dosyasının en altında şu kodu bulun ve değiştirin istediğiniz sayfa sayısını yazın , biraz kurcalamak lazım:)

      pagePadding: 10,

      burdaki 10 sayısını 25, 26 gibi sayılar vererek istediğiniz şekilde sayfa sayısını artırabilirsiniz. Uygulama yaptığınızda değiştirdiyseniz burdan yazarsanız seviniriz.
      Kolay gelsin.

      1. Ömer hocam, bu bilgi bana da lazım oldu. Dediğiniz gibi indexte bu değeri değiştirdim ancak görselde değişen birşey olmadı. Müdahale edebileceğimiz başka biryer var mı?

        1. Doğa arkadaşım dediğim ayarı yaptıktan sonra sayfayı index dosyasından oluşturman lazım. oluşturmazsan ilerlemez. yani içeriği olması lazım ki sayfa geçişi olsun. O yüzden sayfaya oluşturan en alttaki

          ile

          arasını kopyalayıp ondan sonraki satıra yapıştırdıktan sonra oradaki düzendeki gibi sayfayı oluşturmalısın. kolay gelsin.

  6. dijital dergide index te dediğiniz şekil düzenlemeler yaptım ama hata veriyor sayfa yükleniyor diyor ftp e attığımızda

  7. style.css dosyasının içindeki
    body{
    background:#ccc url(../images/wood.jpg) repeat top left;

    wood.jpg resmini değiştirmen lazım. images klasörünün içine resmini koyup sonra burdan adını değiştirsen olur.

  8. Hocam bu çalışmanızda js ile yazı tipini farklı yaptığınızı gördüm bunu nasıl yapacağımı bilmiyordum nasıl arayacağımıda bilmiyordum bi siteden yazı tipinin js ini indirdim ayrıca böyle bir kod verdi –

    Cufon.replace(‘.prolamina_regular’, { fontFamily: ‘ProLamina Regular’, hover: true });
    – sizin verdiğiniz çalışmada ayarlamaya çalıştım olmadı eksikliği nerde yapıyorum

      1. yazı tipini değiştirebiliyorum ben sorum biraz daha farklı internetten farklı yazı tipleri buldum .js uzantılı dosyasını veriyor ayrıca kodda veriyor siteye eklemek için sizin çalışmada kullandığınız gibi ama ben bi türlü uygulayamadım

        1. eklediğiniz dosya ve kod ile bana gönderirseniz sevinirim burdan bişey diyemeyeceğim. normalde eski kodları silip aynı yere eklediğinizde ve cufon klasörünün içinede js dosyasını koyduğunuzda çalışması gerekli.

  9. Merhabalar ilk başta bu kolaylık için teşekkür ederim ama arka plan resmini değiştirdiğimiz zaman resim döşeme şekilde oluyor. Nasıl düzeltebiliriz kolay gelsin.

    1. Onur arkadaşım. Döşeme şeklinden kastın nasıl onu anlamadım tam olarak. Ama şunu söyleyebilirim. İmages klasörünün içinde wood resminin boyutları gibi olmalıdır. ona dikkat etmen gerekiyor.

  10. Paylaşım için tşkrler.. Diğer bütün çalışmalarınız gibi, buda çok güzel olmuş…Sayenizde çok şey öğreneceğime inanıyorum.

  11. s.a hocam flash cs 5 programına ses eklıyemyrm disk hatası veryo hata söle: Couldn’t import ‘C\:users\public\Music\Sample Music\Maid with the flaxen Hair.mp3.

    masaüstündn alsamda aynı hatayı veryo D den alsamda lutfen yardmcı olun.

  12. Merhabalar hocam verdiğiniz emekler için teşekkür ederim. ancak bu uygulamanızda yükleniyor diyor orada kalıyor. sorun neden olabilir.

    1. Numan arkadaşım çalışma tüm browserlarda görüntüleniyor hatta siz dediniz diye yine kontrol ettim ama bir sorun yok. Broeserlarınızı son sürüme güncelleyin.

  13. Ömer kardesim ilk önce sabrin için helal olsun yorumlari okudukça gercekten ögretmenlerin elleri öpülmesi gerekiyor. Yani ayni soruyu soran arkadas’ta koptum ben.

    Paylasim için tesekkurler

    1. Mehmet arkadaşım çok sağol. Siteye olan ilgin bizleri çok sevindiriyor. Bişeyler yapabildiysek ne mutlu bizlere. Sabır Allahtandır. Bizde sabredeceğiz tabikide.

  14. Merhabalar ben de jquery booklet plugini üzerinde çalışıyorum ve css html js bilgilerim var ancak içerik girişini kolaylaştırmak istiyorum çünkü giriş yaparken görüntüdeki sayfanın dolup dolmadığını kontrol etmek gerekiyor sürekli. Sabit bir sayı belirlesek bile sonuçta pc de tablette telefonda farklı sayıda satırlar gösterilecek. Kısacası dinamik bir veri girişi sağlamak istiyorum bunu nasıl yapacağım hakkında bilgilendirebilirseniz çok sevinirim.

  15. Hocam Merhaba ,

    Ben bu sayfayı iframe kullnarak bir sayfaya eklemek istiyorum fakat eklediğim zaman ebatı çok büyük olunca boy olarak problem yok ama eni çok geniş kalıyor sayfa direk kesiyor ebatı nasıl küçültebiliriz ?

    ayrıca mükemmel bir örnek olmuş 🙂

    1. Uğur arkadaşım, bu çalışma bir bütündür. Bu çalışmada küçültme işlemine gitmen demek style.css dosyasındaki tüm işlemleri yeniden düzenlemetir. açılır kapanır sayfayı küçültmen demek butonların küçültülmesi sonrasında düğmelerin küçültülmesi de demek. Kısacası herşeyi css te yeniden yerleştirmen gerekecektir. style css dosyasında zaten fazla birşey yok. width ile ilgili yerleri deneye yanıla yaparsan sonuca ulaşabilirsin. kolay gelsin.

      1. hocam biraz uğraştım fakat pek etkili olmadı , arka planı kaldırarak sadece dergi kısmını kullanabilir hale getirmemiz mümkün müdür acaba ?

        1. Merhaba Uğur,
          Ben kendi çalışmamda arka planı, style css içindeki background kısmını düzenleyerek değiştirdim. Bu şekilde senin de istediğin sonuca ulaşacağını düşünüyorum.

  16. ömer bey iyi geceler yeni tasarımda süper görünüyor sağolun
    hocam bütün yorumları okudum ben inanın kurcalıyarak hepsini hallettim ama Explorer da çalışmıyor resimler yükleniyor diyor ve kalıyor lütfen bakarsanız sevinirim
    bir ricam olacaktı sayfanızda paylaştığınız dijital dergi tam aradığım bir örnekti bi sitemde kullanmaya çalışıyorum fakat firefox ve chrome sorunsuz ama Explorer da çalışmadı sizin index dosyasıda çalışmıyor Explorer da lütfen bir bakıp sorun ne olabileceğini söyleyebilirmisiniz yada siz explorerda bir deneyip bana yazarmısınız
    sevgiler teşekkürler

  17. ömer bey bütün yorumları okudum ben inanın kurcalıyarak hepsini hallettim ama Explorer da çalışmıyor resimler yükleniyor diyor ve kalıyor lütfen bakarsanız sevinirim
    bir ricam olacaktı sayfanızda paylaştığınız dijital dergi tam aradığım bir örnekti bi sitemde kullanmaya çalışıyorum fakat firefox ve chrome sorunsuz ama Explorer da çalışmadı sizin index dosyasıda çalışmıyor Explorer da lütfen bir bakıp sorun ne olabileceğini söyleyebilirmisiniz yada siz explorerda bir deneyip bana yazarmısınız
    sevgiler teşekkürler

  18. sizin site üzerindeki örneği görüntüleyinizi tıklayınca Explorer da açıyor fakat indirip
    index dosyasını açmak istediğimde Explorer da açmıyor
    bu arada Explorer 11 kullanıyorum ömer bey bir yol gösterirseniz ben de çözmeye çalışırım ne denediysem olmadı teşekkürler.

    1. Gülşah hanım, çalışmayı sizin dediğiniz gibi denedim. İnternet 9 ve 11 de hiç bir sorun yaşamadım. bununla ilgili resimleri size gönderdim. Kolay gelsin.

  19. ömer bey ya siz mükemmelsiniz kafayı yicektim çalışmadı diye fakat dediğiniz gibi
    sunucu üstüne yükleyince Explorer da çalıştı hay allah sizden razı olsun hep çocuklarınızdan güldürsün
    yoksa bile olunca sevgiler.

  20. İyi günler sadece 7 adet sayfa yüklenebiliyor. Bu sayıyı arttırmak için ne yapılmalı? yukarıdaki yorumlarda verdiğiniz pagePadding: 10, değeri sayfa paddingini kontrol ediyor.

  21. Çok güzel bir çalışma oldu.
    Tüm bilgileriniz için teşekkürler.
    Yorumlarıyla oluşabilecek sorunlara yön veren diğer kullanıcılara da teşekkür ediyorum.

  22. Hocam konu baya bir eskimiş fakat yardımcı olabilirsiniz belki bana. Ben bu sistemi wordpress’e uyarlamak istiyorum yani mesela bildiğiniz gibi wordpress olayı var, sizin verdiğiniz e-dergi uygulamasında da div ler arası birer sayfa olarak görünüyor, şimdi biz bunu divler arası değilde wordpress’in nextpage koduna uyarlayabilirmiyiz?

  23. iyi günler hocam ben böyle bir dergi oluşturdum kvisoft’un bir dergi hazırlama programı var pdfleri yerleştirip oluşturuyorsun.Fakat oluşturduğum dergiyi internet ortamına nasıl aktaracağımı bilmiyorum yardımcı olursanız sevinirim

    1. Turan arkadaşım çalışmanın boyutunu artırmak istediğinde images klasörü içindeki bg.png dosyasını düzenlemelisin. lakin bunu genişlettiğinde style.css dosyasındaki her şeyin yerini değiştirmelisin. Kısacası çok uzun bir iştir.

  24. Hocan iyi günler. Ben bu dergideki resim kısmına video eklemek istiyorum. Ancak dreamveawerdan eklediğimde fullscreen haline getiremedim.Gömülü olarak kalıyor.Cevabınızı bekliyorum yardımlarınız için şimdiden teşekkür ederim

  25. Hocam dergideki izle kısmına tıkladığımızda videoyu internet linki değil de kendi masaüstünden çağırdığımızda, kaydetmek için yönlendiriyor. Bunu nasıl oynatabiliriz.Tekrar teşekkürler.

    1. Ali haydar arkadaşım, video izlenebilmesi için videonun embed kodlarını eklemen gerekiyor. O yüzden youtube gibi siteleri kullanmakta fayda var. Videoyu oraya at embed kodlarıyla sitende tanımla

      1. Hocam öncelikle cevabınız için teşekkürler. Lakin hazırlayacağımız yıllık(andaç) internet bağlantısı olmayan bilgisayar vs. görüntülenebilsin istiyoruz. Dreamweaver ile hazırlamak mümkün müdür? Videoyu gömdüğümde fullscreen haline getiremiyorum. Ve kod kalabalığı da ayrı tabi.Önerilerinizi bekliyorum.Şimdiden teşekkürler.

        1. Ali video eklemeyi bu çalışmada denemediğim için bir şey söyleyemeyeceğim. jquery ile yapılmış başka video açılış çalışmaları deneyebilirsin.

          1. Hocam çok soru sordum fakat son bir şey sormak istiyorum müsadenizle. Biz bu tasarımı yıllık için kullanmak istiyoruz. !00 üncü sayfaya bir anda gidebilmek için sayfanın yanında linkler vermek veya daha güzeli bir “arama butonu” hazırlayarak direk o sayfaya gidebilmek için nasıl bir çalışma yapmalıyım bu tasarım üzerinde.Yardımlarınız ve cevabınız için şimdiden çok teşekkür ederim.

  26. Hocam mesajım araya kaynamasın diye tekrar bi mesaj yazayım dedim.Bir süredir yorumunuzu bekliyorum.Bu hususta yardımcı olabilirseniz sevinirim.Tavsiyelerinizi bekliyorum.Şimdiden çok teşekkür ederim.

    1. Ali haydar arkadaşım arama butonu yapmak istiyorsan site içi arama yapman lazım. Bunun için asp veya php bilmelisin. Bu soruyu sorduğuna göre ASP veya PHP bilmediğin belli. O yüzden bir yazılımcıdan destek almalısınız.

  27. peki hocam cevabınız için teşekkür ederim. Anlaşılan içindekiler kısmı olan başka bir dergi örneği bulmalıyım galiba .

  28. ömer hocam merhaba hocam ben bunu indirdim resimler göstermedi sadece 3 adet resim koydum olmadı bana yardım edebilirmisiniz hocam neolur

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.