• [Mod] Add/Remove image to/from lightbox without page refresh (2009-07-29) 5 0 5 1
Currently:  

Author Topic: [Mod] Add/Remove image to/from lightbox without page refresh (2009-07-29)  (Read 113272 times)

0 Members and 1 Guest are viewing this topic.

Offline zakaria666

  • Full Member
  • ***
  • Posts: 211
    • View Profile
sorry, i do apologize i will dlete the comment i made

Offline bernd

  • Full Member
  • ***
  • Posts: 214
    • View Profile
Re: [Mod] Add/Remove image to/from lightbox without page refresh (2009-07-29)
« 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

$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

$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)

Code: [Select]
$(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

<?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.

Code: [Select]
$(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
Code: [Select]
$('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  8)

b.

Offline alekseyn1

  • Full Member
  • ***
  • Posts: 102
    • View Profile
    • My Project
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

Code: [Select]
<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

$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
$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

<?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;
?>

Offline zhono

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
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?

Offline alekseyn1

  • Full Member
  • ***
  • Posts: 102
    • View Profile
    • My Project
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

Offline zhono

  • Jr. Member
  • **
  • Posts: 52
    • View Profile
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
Code: [Select]
<?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
Code: [Select]
<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
Code: [Select]
 $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
Code: [Select]
     $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 »

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
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

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
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 :)
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)

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
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 :)

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  :)


--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 »

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
Did you try it  :?: :?: :!:

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
Does anyone know where the problem is  :roll: :roll:

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
Awkward Silence  :lol:

Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
Please anyone knows what I have to do

I'm given up  :(

Rembrandt

  • Guest
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


Offline ahmed_badawy

  • Newbie
  • *
  • Posts: 48
    • View Profile
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  :oops: :oops:

I'm so so sorry about that

I didn't mean to break the rules

 

Post your comments here