Solved

highslide using ajax with php

Posted on 2013-01-28
7
470 Views
Last Modified: 2013-01-29
Hi,

I'm trying get highslide to only display the selected image using ajax.
I'm calling the <a> like this: <a href=\"editphotos.php#div$index\" onclick=\"return hs.htmlExpand(this, { objectType: 'ajax'} )\"> Now in the editphotos.php I have a loop that loops the images and puts them into a <div id="$index"> so this should show only the selected div am I right?

edithphotos.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Testi</title>
    </head>
    <body>

    <?php
    include("db_connect.php");
    $user = $_SESSION['users_id'];
    $userpictureSql = "select * FROM userphotos WHERE user_='$user' order by id";
    $resultsqlquery = mysql_query($userpictureSql)or die(mysql_error());
    $photocount = mysql_num_rows($resultsqlquery);
    echo ('<div style="margin-left: 13px; padding-top: 10px;">');
    if ($photocount > 0){
    $index = 0;
    while($index < $photocount)
    {   
       $imageid_ = mysql_result($resultsqlquery, $index, id);
       //$thumbnail_ =  mysql_result($resultsqlquery, $index, thumbnailname);
       $phototext_ =  mysql_result($resultsqlquery, $index, phototext);
       $text_ = html_entity_decode($phototext_);
       $text_original = html_entity_decode($phototext_);
        $text_ = substr($text_original,0,20);
        $count_ = strlen($phototext_);   
       $filename_ = mysql_result($resultsqlquery, $index, filename);
       $thumbnail_ = mysql_result($resultsqlquery, $index, thumbnail);
       $defaultphoto_ = mysql_result($resultsqlquery, $index, defaultphoto);
       $folder_ = mysql_result($resultsqlquery, $index, userfolder);
       if ($count_ > 20)
       {$dots = "...";}
       else{$dots = "";}

       echo "<div id=\"$index\" style=\"float: left; border: 1px solid #dadada; padding: 3px; margin: 5px;\">";         
       echo "<img src=\"userAlbums/$folder_/$thumbnail_\" style=\"border: none; width: 150px; height: 100px; padding: 5px;\" alt=\"$text_original\" title=\"$text_original\"/>".PHP_EOL;
       
       if ($text_original == ''){echo "<div style=\"margin-left: 5px;\">&nbsp;</div></div>";}else {echo ('<div style="margin-left: 5px;">'.$text_.''.$dots.'</div></div>');}
       $index ++;   
    } // end while   
    echo ('<div style="clear: both;"></div>');   
    }//end if
    echo "</div>";

    ?>

    </body>
    </html>

Open in new window


How do get the Highslide popup only show the image that was clicked on?
When I get the selected Image I'm going to add a form so that I can update the images text, make it default or delete it.

Regards,

Toby
0
Comment
Question by:Toube
  • 4
  • 3
7 Comments
 

Author Comment

by:Toube
ID: 38830520
Anyone,
what I'm trying to do here is this:
http://www.roadrash.no/hs-support/multiline-heading.html

Regards,

Toby
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38830879
I'm trying get highslide to only display the selected image using ajax.
I don't see image on your link,  I can see only three links on the left
I'm calling the <a> like this: <a href=\"editphotos.php#div$index\" onclick=\"return hs.htmlExpand(this, { objectType: 'ajax'} )\">
this is the html code for each link, right?
Now in the editphotos.php I have a loop that loops the images and puts them into a <div id="$index"> so this should show only the selected div am I right?
Not sure... Could you open editphotos.php in your web browser, do a right click on the page, choose view source and post it here? Thanks.
How do get the Highslide popup only show the image that was clicked on?
Are you talking about the links on the left? I don't see any ajax call, could you provide YOUR link to the highlight plugin? Thanks.
0
 

Author Comment

by:Toube
ID: 38830970
Hi,

thanks for your reply. The link that I posted is not in my site it's an example of what I'm trying to achieve.

The link looks like this:
echo "<a href=\"editphotos.php#div$imageid_\" onclick=\"return hs.htmlExpand(this, { objectType: 'ajax'} )\" title='$text_original'><img src=\"userAlbums/$folder_/$thumbnail_\" style=\"border: none; width: 150px; height: 100px; padding: 5px;\" alt=\"$text_original\" title=\"$text_original\"/></a>".PHP_EOL;

Open in new window


Here's the output source from editphotos.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta content="MSHTML 6.00.2800.1106" name="GENERATOR" />
<title>Muokkaa kuvia</title>
</head>
<body>
<div id="455" style="float: left; border: 1px solid #dadada; padding: 3px; margin: 5px;">
<img src="userAlbums/Hanni/tn_Eirik_ute.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" title="UIlkona keväällä 2012"/>
<div style="margin-left: 5px;">UIlkona keväällä 201...</div></div>
<div id="456" style="float: left; border: 1px solid #dadada; padding: 3px; margin: 5px;">
<img src="userAlbums/Hanni/tn_EoM.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" title="Eirik ja Mimosa"/>
<div style="margin-left: 5px;">Eirik ja Mimosa</div></div>
<div id="457" style="float: left; border: 1px solid #dadada; padding: 3px; margin: 5px;">
<img src="userAlbums/Hanni/tn_mika_harja.jpg" style="border: none; width: 150px; height: 100px; padding: 5px;" title="Mikäs harja tämä on?"/>
<div style="margin-left: 5px;">Mikäs harja tämä on?...</div></div>
<div id="508" style="float: left; border: 1px solid #dadada; padding: 3px; margin: 5px;">
<img src="userAlbums/Hanni/tn_004.png" style="border: none; width: 150px; height: 100px; padding: 5px;" title="Jou dude"/>
<div style="margin-left: 5px;">Jou dude</div></div>
<div style="clear: both;"></div>
</body>
</html>

Open in new window



Regards,

Toby
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 82

Expert Comment

by:leakim971
ID: 38830994
OK, I think this is the page of your plugin : http://highslide.com/
As you can see editphotos.php return more than one image, I understood  this is not what you want
So editphotos.php should accept a parameter (POST or GET, let start with GET), you retrieve it at the beggining and return ONLY the image (and div blocks) for this parameter.
Are you agree?
0
 

Author Comment

by:Toube
ID: 38831038
Yes Highslide it's what it is called.

editphotos.php returns many images but what I wan't is it to only display one image using the ajax call on with the <div#imageid>.

Regards,

Toby
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 450 total points
ID: 38831043
So editphotos.php should accept a parameter (POST or GET, let start with GET), you retrieve it at the beggining and return ONLY the image (and div blocks) for this parameter.
0
 

Author Closing Comment

by:Toube
ID: 38831369
Yes got it working.
thanks.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now