Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

highslide using ajax with php

Posted on 2013-01-28
7
Medium Priority
?
551 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

705 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