Register Arama Bugünkü Mesajlar Tüm Forumu Okundu Say

Reply
 
Thread Tools
How to use the vBulletin 4 Lightbox Anywhere
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 4 Makaleleri, yazan vB.Org Poster 09 Jul 2018, 23:44

This tutorial will explain how to use the vB 4 lightbox anywhere in the site for images other than attachments.

In order to accomplish this you will have to make the following:
  • A file that returns xml & processes the images
  • Template edits where you want to use the lightbox
  • A database table containing the filename, upload/creation time of the image & a unique id. (could be done without a database table, but a database table would be best)

The File:
Create a file, name it whatever you like, in this tutorial we will use "testlightbox.php" which should be placed in the root directory with the following:

  1. Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

    What that does is checks if we are loading the lightbox or just the image so that the lightbox template can be precached & later we can create the xml needed for the lightbox. (Will fail and just display the image if javascript isn't enabled.)

  2. Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

    This is some generic back-end settings.
  3. After completing steps 1 & 2 we need to process the values passed in though posts/requests. This can be done using:
    Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

  4. Now you will need to retrieve the information for the images being loaded from the database.
  5. Now at this point if we are loading the lightbox we will break off into it, if not we will process and display the image.
    Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

Now this file should look something like this:
Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

The Template Edits:

For the lightbox to work for your images you will need to place the following in the appropriate templates:

  1. Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

    In the head tag of the template.
  2. A div around all the links you want to be affected. (Can be multiple divs if needed).
  3. Each div will need a unique id value.
  4. Each image you want linked should be wrapped with the following:
    Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

    Where:
    • IMAGEURL = the url to the file we just made & a reference to the image to load (ex. testlightbox.php?id=2)
    • GROUPNUMBER = A number (All images with identical groupnumbers will be grouped together when shown in the lightbox.)
    • IMAGEID = A unique id for the image (Can be just about anything)
  5. Lastly after all the divs, preferably right before the footer is called, you will need to put:
    Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
    Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

    Where DIV_ID is equal to the id of the div made in step 2.
Example Template:

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

Below you will find a zip that contains this tutorial & a sample of how this works. To use the sample simply upload the contents of the uploads folder to your forum root directory, install the product, and open www.yourdomain.com/forumroot/iwtlightboxdemo/testlightbox.php in your browser.

An example of it can also be found at www.idealwebtech.com/demos/vb_lightbox_demo/lightbox.php

This tutorial brought to you by Ideal Web Technologies.
Views: 29
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


LD'de Yeni misin? Yardıma mı ihtiyacın var?

All times are GMT +3. The time now is 06:01.

Tasarım Özelliği | Genişlik: Geniş Renk: How to use the vBulletin 4 Lightbox Anywhere How to use the vBulletin 4 Lightbox Anywhere How to use the vBulletin 4 Lightbox Anywhere How to use the vBulletin 4 Lightbox Anywhere How to use the vBulletin 4 Lightbox Anywhere