Solved

highslide using ajax with php

Posted on 2013-01-28
7
526 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

627 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