 | PHP Builder
free solutions for web developers
|
|
|
COMPUSORY UPGRADE!!! Request an upgrade NOW! 32+ Pre-installed Modifications! 3 Server Locations to choose from: USA, UK and JAPAN.
11th December 2012 - phpBB88: All servers are upgraded to run using SSD drive. Click Here to report problems!
| View previous topic :: View next topic |
| Author |
Message |
zewa666
Site Moderator
Joined: 01 Feb 2007
Posts: 606
:
Items
|
 Posted: Sun Dec 23, 2007 2:25 pm Post subject: [DG-Plugin] Cool Modal box for Images |
 |
|
Hi there ...
Today I got a really neat little dg hack for you.
Anybody knows Lightbox? No? Than look here...
Lightbox brings up a very nice modal box, meaning its shadowing the rest of the Homepage and drawing your attention to the popped up box. A great way to display Images. Similair to lightbox is also Thickbox, which even can display everything like Video, Docs etc. in the popped box.
But this little Tut stays with Lightbox.
So imagine you would like to display the picture in Datagrid as a link, and on clicking this link the popped up box shall appear ... like here
As you already see its possibly 
What you need to do
First of all, download this package, its a RAR file containing the latest Lightbox scripts. Unrar it to the datagrid folder modules.
It will create inside modules a new folder lightbox with all the necessary files in it.
Next lets create a folder where the images will be which we want to display. the folder shall be named "myimages" and shall be located in the datagrid root folder.
Now set up your datagrid bindpage to upload the pictures into this folder in edit mode.
For how setting up a em_columns with upload mode, look into the example or the GETTING STARTED section.
head over to the COLUMNS IN VIEW MODE section and create a column that uses the picture column of you database with the necassary path.
now of that column add into the REL attribute "lightbox" and prepare the href path as needed.
here is a example of mine
| Code: | | "picture_URL"=>array("header"=>"Picturelink", "type"=>"link", "align"=>"left", "wrap"=>"nowrap", "text_length"=>"-1", "tooltip"=>true, "tooltip_type"=>"floating", "case"=>"normal", "summarize"=>"false", "sort_by"=>"", "visible"=>"true", "on_js_event"=>"", "field_key"=>"picture_URL", "field_data"=>"picture_URL", "rel"=>"lightbox", "title"=>"", "target"=>"_blank", "href"=>"./myimages/{0}") |
Now go on to the beginning of your bindpage. If this is located inside the datagrid root folder append this at the very begin:
| Code: |
Please replace XXX with an opening bracket
XXXscript type="text/javascript" src="modules/lightbox/js/prototype.js">XXX/script>
XXXscript type="text/javascript" src="modules/lightbox/js/scriptaculous.js?load=effects">XXX/script>
XXXscript type="text/javascript" src="modules/lightbox/js/lightbox.js">XXX/script>
XXXlink rel="stylesheet" href="modules/lightbox/css/lightbox.css" type="text/css" media="screen" />
|
As you see the first 3 rows append the lightbox script and wait for the LINK REL signal lightbox. the last row includes the css box, which you also could implement in your existing css file.
now save your file and try it ...
Greetings
Zewa |
|
| Back to top |
|
 |
zewa666
Site Moderator
Joined: 01 Feb 2007
Posts: 606
:
Items
|
| Posted: Sun Dec 23, 2007 6:43 pm Post subject: |
|
|
And one more change ...
As you see above picture the title beneath the picture is pretty boring.
How about displaying the Imagename underneath?
So lets say you want some output like
"Picturename: XXX" where XXX is the name of the img you clicked.
All you need to do is opening your bindpage and in the field where the Picture column is made, write into title your fixed part like in this case
"Picturename: "
now open your datagrid.class.php and search for this code
| Code: | | $title = $this->getFieldTitle($field_name, "view"); |
after it add following line
$orig_title = $title;
now search for:
| Code: | | $href = str_replace("{".$field_number."}", $field_inner, $href); |
and add after it this here:
$title = $orig_title.$field_inner;
Thats it ... now every time the lightbox opens it shows your standardtitle + the imagename.
Greetings
Zewa |
|
| Back to top |
|
|
sr1201
Newbie
Joined: 03 Jan 2008
Posts: 2
:
Items
|
| Posted: Fri Jan 04, 2008 2:27 am Post subject: Link not working |
|
|
Hi there,
It might be a "phantom translucent error" but I have no luck with that download link.
Thanks,
Stefan |
|
| Back to top |
|
|
zewa666
Site Moderator
Joined: 01 Feb 2007
Posts: 606
:
Items
|
|
| Back to top |
|
|
| |
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
