4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 30, 2016, 10:40:36 AM

Login with username, password and session length
Search:     Advanced search
Check the new Tutorial subforum with helpfull guides and tutorials for modifications and tweaks.
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [Mod] Add/Remove image to/from lightbox without page refresh (2009-07-29)
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: «« « 1 2 3 4 [5] Print
Current Topic Rating: *****
Author Topic: [Mod] Add/Remove image to/from lightbox without page refresh (2009-07-29)  (Read 83239 times)
zakaria666
Full Member
***
Offline Offline

Posts: 211

Thank You
-Given: 55
-Receive: 2


View Profile
« Reply #60 on: July 31, 2010, 09:53:56 PM »

sorry, i do apologize i will dlete the comment i made
Logged
bernd
Full Member
***
Offline Offline

Posts: 214

Thank You
-Given: 0
-Receive: 1


View Profile
« Reply #61 on: January 23, 2011, 06:02:33 PM »

The graphic-version works fantastic, BUT...
...instead of the graphic-buttons I do only use text-buttons in the functions.php:
[..]
The difference is just the background-color, which is given by the css-class "button" / "button_active".

I had the same "issue" and here I how I did it. I actually ended up doing it all in jQuery as I use on the site anyway. So there you go. my button code in functions.php looks like this

1
$lightbox_button "<div class=\"lightbox\"><a href=\"".$site_sess->url($lightbox_url)."\" id=\"img".$image_row['image_id']."\" class=\"icon-tip\" title=\"".$lang['alt_lightbox_no']."\">".$lang['lightbox']."</a></div>";

and

1
$lightbox_button "<div class=\"lightbox\"><a href=\"".$site_sess->url($lightbox_url)."\" id=\"img".$image_row['image_id']."\" class=\"icon-tip\" title=\"".$lang['alt_lightbox_yes']."\">".$lang['lightbox']."</a></div>";

This is slightly different from the standard set-up but you'll be able to spot the differences. I put the image-ID concatenated with "img" inside the id attribute as I will use jQuery to change this element's title attribute later on and finding this element I could only get to work using the id. Putting the "img" in front of the id itself is because an id should not start with a number. This lightbox link works as is also without jQuery.
This is the jQuery code (mine actually is slightly different as I also toggle a parent's <li> class)

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
$('li div.lightbox a').click(function() {
var elementId = '#'+$(this).attr('id');
$.get(
"lightboxaction.php",
{ id: $(this).attr('id') },
function(data) {
$(elementId).attr('title', data);
},
"text");
return false;
});
});

I put this code into the footer.html. And then of course my lightboxaction.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
define
('ROOT_PATH''./');
include(
ROOT_PATH.'global.php');
require(
ROOT_PATH.'includes/sessions.php');
$error 0;
if (isset(
$HTTP_GET_VARS['id']) || isset($HTTP_POST_VARS['id']))
{
  
$id = (isset($HTTP_POST_VARS['id'])) ? substr(trim($HTTP_POST_VARS['id']), 3) : substr(trim($HTTP_GET_VARS['id']), 3);
}
else
{
  
$id "";
}
if (
$id)
{
  if (
check_lightbox($id))
  {
    
$title = (remove_from_lightbox($id)) ? $lang['alt_lightbox_no'] : $lang['alt_lightbox_yes'];
  }
  else
  {
    
$title = (add_to_lightbox($id)) ? $lang['alt_lightbox_yes'] : $lang['alt_lightbox_no'];
  }
}
else
{
  
$error 1;
}
if (
$error)
{
  die(
"Security violation");
}
echo 
$title;
?>

So to the previous question, it would be very easy to adopt it. Just change the jQuery code to the following. This should work and toggle your two classes on and off.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
$('li div.lightbox a').click(function() {
var elementId = '#'+$(this).attr('id');
$.get(
"lightboxaction.php",
{ id: $(this).attr('id') },
function(data) {
$(elementId).attr('title', data);
},
"text");
$(this).toggleClass('button');
$(this).toggleClass('button_active');
return false;
});
});

Oh - and of course you guys need to adopt the jQuery selector for the "click" to your needs. So the
1
$('li div.lightbox a').click(function() {
needs to match your document's structure.

Yes, I agree - this is not a nice copy+paste tutorial but it should allow you to adopt it to your needs if you know a bit jQuery. I mean, I managd to come up with this and I hardly know jQuery  Cool

b.
Logged
alekseyn1
Full Member
***
Offline Offline

Posts: 102

Thank You
-Given: 13
-Receive: 9


View Profile WWW
« Reply #62 on: March 09, 2011, 01:38:39 PM »

Well, for those of you that could not make the MOD work using V@no's code, here is ther reworked code based on above post from bernd

Place this in your header.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function(){
$('#lb a').click(function() {
$.get(
"lightboxaction.php",
{ id: $(this).attr('id') },
function(data) {
$('#lb img').attr('src', data);
},
"text");
return false;
});

});
</script>

first line of the image button in functions.php

1
$lightbox_button "<span id=\"lb\"><a href=\"".$site_sess->url(ROOT_PATH."lightboxaction.php")."\" id=\"".$image_row['image_id']."\" title=\"".$lang['alt_lightbox_yes']."\"><img src=\"".get_gallery_image("lightbox_yes.gif")."\" border=\"0\" alt=\"\" /></a></span>";

second line of the image button
1
$lightbox_button "<span id=\"lb\"><a href=\"".$site_sess->url(ROOT_PATH."lightboxaction.php")."\" id=\"".$image_row['image_id']."\" title=\"".$lang['alt_lightbox_no']."\"><img src=\"".get_gallery_image("lightbox_no.gif")."\" border=\"0\" alt=\"\" /></a></span>";


content of lightboxaction.php in your root

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
define
('ROOT_PATH''./');
include(
ROOT_PATH.'global.php');
require(
ROOT_PATH.'includes/sessions.php');
$error 0;
if (isset(
$HTTP_GET_VARS['id']) || isset($HTTP_POST_VARS['id']))
{
  
$id = (isset($HTTP_POST_VARS['id'])) ? $HTTP_POST_VARS['id'] : $HTTP_GET_VARS['id'];
}
else
{
  
$id "";
}

if (
$id)
{
  if (
check_lightbox($id))
  {
    
$title = (remove_from_lightbox($id)) ? get_gallery_image("lightbox_no.gif") : get_gallery_image("lightbox_yes.gif");
  }
  else
  {
    
$title = (add_to_lightbox($id)) ? get_gallery_image("lightbox_yes.gif") : get_gallery_image("lightbox_no.gif");
  }
}
else
{
  
$error 1;
}


if (
$error)
{
  die(
"Security violation");
}
echo 
$title;
?>
Logged

zhono
Jr. Member
**
Offline Offline

Posts: 52

Thank You
-Given: 3
-Receive: 9


View Profile
« Reply #63 on: March 30, 2011, 12:20:12 PM »

Well, for those of you that could not make the MOD work using V@no's code, here is ther reworked code based on above post from bernd

Thanks for that. It works great, except for one problem. It adds and removes the image you want, just like it should. But when I use it on the categories page or the home page, in thumbnail_bit, it changes the lightbox button image for every one on the page. So if I click one, they all change to the "checked" image. Same thing if I click to remove from the lightbox. They all change. Any way to fix that?
Logged
alekseyn1
Full Member
***
Offline Offline

Posts: 102

Thank You
-Given: 13
-Receive: 9


View Profile WWW
« Reply #64 on: March 30, 2011, 12:29:41 PM »

But when I use it on the categories page or the home page, in thumbnail_bit, it changes the lightbox button image for every one on the page. So if I click one, they all change to the "checked" image. Same thing if I click to remove from the lightbox. They all change.

my code above is for the details page only... it needs to be modified to be used on categories page... no time right now... maybe someone will help sooner than me...

do you really need this for the categories page? Do you think your users will decide to put the image into the lightbox based on thumbnail only? This will also discourage them from rating and commenting your images as well
Logged

zhono
Jr. Member
**
Offline Offline

Posts: 52

Thank You
-Given: 3
-Receive: 9


View Profile
« Reply #65 on: March 30, 2011, 12:37:27 PM »

I'm working on modifying the code myself, so if no one else has a solution, I'll post mine. I couldn't use v@no's original code because I use jquery, and it breaks his code. With the layout of my site, it makes sense to have a favorites/lightbox button under the thumbnails. I built a screensaver mod(to replace KurtW's old one) and I want to be able to quickly add images to the favorites for use as a screensaver.


*EDIT*

Okay, I got it on my own. Here's what I did.


lightboxaction.php - same as yours above
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
define
('ROOT_PATH''./');
include(
ROOT_PATH.'global.php');
require(
ROOT_PATH.'includes/sessions.php');
$error 0;
if (isset(
$HTTP_GET_VARS['id']) || isset($HTTP_POST_VARS['id']))
{
  
$id = (isset($HTTP_POST_VARS['id'])) ? substr(trim($HTTP_POST_VARS['id']), 3) : substr(trim($HTTP_GET_VARS['id']), 3);
}
else
{
  
$id "";
}
if (
$id)
{
  if (
check_lightbox($id))
  {
    
$title = (remove_from_lightbox($id)) ? get_gallery_image("lightbox_no.gif") : get_gallery_image("lightbox_yes.gif");
  }
  else
  {
    
$title = (add_to_lightbox($id)) ? get_gallery_image("lightbox_yes.gif") : get_gallery_image("lightbox_no.gif");
  }
}
else
{
  
$error 1;
}


if (
$error)
{
  die(
"Security violation");
}
echo 
$title;
?>


javascript in header
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function() {
$('div.lightbox img').click(function() {
var elementId = '#'+$(this).attr('id');
$.get(
"lightboxaction.php",
{ id: $(this).attr('id') },
function(data) {
$(elementId).attr('src', data);
},
"text");
return false;
});
});
</script>


first line
1
 $lightbox_button = "<div class=\"lightbox\"><a href=\"".$site_sess->url($lightbox_url)."\"><img id=\"img".$image_row['image_id']."\" src=\"".get_gallery_image("lightbox_yes.gif")."\" border=\"0\" alt=\"\" /></a></div>";          }


second line
1
     $lightbox_button = "<div class=\"lightbox\"><a href=\"".$site_sess->url($lightbox_url)."\"><img id=\"img".$image_row['image_id']."\" src=\"".get_gallery_image("lightbox_no.gif")."\" border=\"0\" alt=\"\" /></a></div>";


Works in thumbnail_bit anywhere I want it to.
« Last Edit: March 30, 2011, 01:48:49 PM by zhono » Logged
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #66 on: May 27, 2011, 11:33:38 AM »

Not working Often , i tested the mod in my localhost and the demo , same problem

I record video by Adobe Captivate for your site and i tested the mod .. see the video in Attach

I hope to find a solution for this problem

* Testlightbox.zip (3006.14 KB - downloaded 7 times.)
Logged
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 560

mmm PHP...


View Profile WWW
« Reply #67 on: May 28, 2011, 05:00:51 AM »

Works fine for me in FF4, IE9, Chrome, Opera. Perhaps either something wrong with your browser (try another one), or ... something wrong with your browser Smile
Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #68 on: May 28, 2011, 06:49:21 AM »

Works fine for me in FF4, IE9, Chrome, Opera. Perhaps either something wrong with your browser (try another one), or ... something wrong with your browser Smile

My browser Google Chrome last version 11.0.696.71 ,, and I will try it in Firefox 4.0.1.

Try your Chrome browser and click on any Specific lightbox 3 or 4 time and refresh the browser and go to lightbox page and try to add or remove the same image.

thank you for your time  Smile


--edit--

Firefox 4.0.1 working great

I will try IE9 and IE8 and IE7


--edit--

All versions of IE working

I think the problem with Chrome


--edit--

Been confirmed from another computer with a Google Chrome browser

First is working normally and click on any Specific lightbox 4 to 6 times and is not gonna working anymore
« Last Edit: May 28, 2011, 07:09:43 AM by ahmed_badawy » Logged
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #69 on: May 29, 2011, 06:19:14 PM »

Did you try it  Question Question Exclamation
Logged
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #70 on: June 01, 2011, 12:12:58 PM »

Does anyone know where the problem is  Rolling Eyes Rolling Eyes
Logged
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #71 on: June 04, 2011, 05:18:02 AM »

Awkward Silence  Laughing
Logged
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #72 on: July 07, 2011, 04:42:37 PM »

Please anyone knows what I have to do

I'm given up  Sad
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 892

Vienna


View Profile WWW
« Reply #73 on: July 07, 2011, 06:26:17 PM »

Please anyone knows what I have to do
...
i think there is a specific chrome problem, how about if you ask in "Google Chrome Forum".

and please read this -> http://www.4homepages.de/forum/index.php?topic=3914.0#post_rule8

mfg Andi

Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
ahmed_badawy
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #74 on: July 08, 2011, 01:09:11 AM »

Please anyone knows what I have to do
...
i think there is a specific chrome problem, how about if you ask in "Google Chrome Forum".

and please read this -> http://www.4homepages.de/forum/index.php?topic=3914.0#post_rule8

mfg Andi



ops  Embarassed Embarassed

I'm so so sorry about that

I didn't mean to break the rules
Logged
Pages: «« « 1 2 3 4 [5] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.266 seconds with 20 queries.
Post your comments here