wordpress custom field values through jquery

Question

i am working on a jquery slider that have thumbnails in the bottom and i want them to link with related videos. what i am doing for that is i am adding a post from admin, the title contain the title of image, the content area contain the thumbnail image and for the video link i am adding a custom field.

come to slider again if i am doing the same process for images only(not video) it work fine. i click on thumbnail in the bottom and large image displays in slider. i am getting the source of image that i am clicking through this line of code

   var url = $(this).attr("src");

it gives me the source of the image from img tag. every thing is fine. but now my exact point is that i want to get the custom field value through the above piece of code but i dont know how to do that as i tried so many methods randomly from the internet but nothing work fine for me.

hope you guys will understand what i am saying if not i will give further details with code if required.

any help will be grately appriciated.

here is my full code(php and html)

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

here is the javascript jquery

   <script type="text/javascript">
$(".video-gallery img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }

// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $('.myclass').attr('id');
alert(url);
// get handle to element that wraps the image and make it semi-transparent
var wrap = $(".image_wrap").fadeTo("medium", 0.5);

// the large image from www.flickr.com
var img = new Image();


// call this function after it's loaded
img.onload = function() {

    // make wrapper fully visible
    wrap.fadeTo("fast", 1);

    // change the image
    wrap.find("iframe").attr("src", url);

};

// begin loading the image from www.flickr.com
img.src = url;

// activate item
$(".video-gallery img").removeClass("active");
$(this).addClass("active");

  // when page loads simulate a "click" on the first image
 });
 </script>

Matanya · Accepted Answer · 2012-11-20 07:51:38Z

2

you need to use the get_post_meta() function to retrieve the desired custom field, like so:

$custom_field = get_post_meta($post->ID,'CustomFieldName', true);

answered Nov 20, 2012 at 7:51

Matanya

6,3469 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Kashif Waheed Over a year ago

yes you are right i already know that i can get it through this function but i want to get it through jqery not php

Matanya Over a year ago

you are mixing client- and server- side. You cannot retrieve data from the remote server with JQuery. You have to use a server side language such as PHP. Once you have retrieved the value you can assign it to a JavaScript Variable, and manipulate it, like so: var custom_field = <?php echo $custom_field; ?>;

Tomas Ramirez Sarduy Over a year ago

@Matanya, you can use JSON to retrieve data from remote server ;)

Matanya Over a year ago

@Tom: I suppose you mean retrieving a JSON object with AJAX. Well, this is also done via server-side language, as any other AJAX request. The returned object may be parsed as JSON by json_encode() but that doesn't change the fact that the actual data retrieval happens in the server-side with server-side language

Kashif Waheed Over a year ago

now i edit my code check it. when i alert the url it gives me undefined. the line echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>' doesn't echo the $custom_field when i view the source i get the result <div class="myclass" style="display:none" id=""></div>. here you can see the id is empty i dont know why

|

Tomas Ramirez Sarduy · Accepted Answer · 2012-11-20 08:43:45Z

0

You can use custom attributes prefixed with data-, add this when you retrieve every thumbnail:

<img data-video="get_post_meta($post->ID,'video_ulr', true);" src="...">

And you can manipulate this "data" using Jquery. For example, to retrieve data in your example use this:

var url = $('this').data('video');

take a look at the jQuery documentation for more info/examples.

edited Nov 20, 2012 at 8:43

answered Nov 20, 2012 at 8:19

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

4 Comments

Tomas Ramirez Sarduy Over a year ago

@KashifWaheed: You are using quotes incorrectly: try this: echo '<div class="myclass" style="display:none" id="$custom_field"></div>';

Matanya Over a year ago

@KashifWaheed: If you still get an empty string, try using var_dump($custom_field) to get the value returned by the function (should be "bool false" if no such field exists)

Kashif Waheed Over a year ago

@Matanya i did it as what you said result is ok it exsist and the i save the result in a vari able $custom_field and try to use it in next line of code but the varible get empty in the next line of code

Tomas Ramirez Sarduy Over a year ago

@KashifWaheed, then you are not printing the line correctly (delete single quotes and dots inside that line)

Collectives™ on Stack Overflow

wordpress custom field values through jquery

2 Answers 2

16 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related