WordPress.org

Ready to get started?Download WordPress

Forums

JSJ Gallery Slideshow
[resolved] How to add image caption for plugin (17 posts)

  1. managunjikar
    Member
    Posted 6 months ago #

    I added image caption in gallery for all images but it not shown on slider,is there any setting for plugin to add image caption or any hard code change in file?. Please help me to solve this.

    http://wordpress.org/plugins/jsj-gallery-slideshow/

  2. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    Hey Manoj,

    There's definitely not a plugin for this and trying to use another plugin for this would probably break it.

    So yes, in order to fix this you would probably need to mess around the plugin PHP code and some jQuery later on. I would probably do it through a data tag. If don't know any PHP or Jquery/Javascript maybe you could get a developer to do this for you/

    If you know some php, you can do this by adding the caption at line 275 of 'jsjSlideshow.php':

    // Start Gallery
    		$output .= apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    		$i = 0;
    		foreach ( $attachments as $id => $attachment ) {
    			$i++;
    			  // This comes from line 770 of wp-includes/media.php
    			$attributes = array(
    				'data-galleryid'   => $instance,
    				'data-link'   => wp_get_attachment_image_src( $id, "full" ),
    				);
    			$output .= wp_get_attachment_image( $id, 'pageWidth', false, $attributes);
    		}
    		$output .= "</div>\n";
  3. managunjikar
    Member
    Posted 6 months ago #

    I have tried this but it shows image caption on slider means it shows caption as slide i have put this code `// Start Gallery

    $output .= apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    		$i = 0;
    		foreach ( $attachments as $id => $attachment ) {
    			$i++;
    			  // This comes from line 770 of wp-includes/media.php
    			<strong>$output .= "
    				<{$captiontag} class='wp-caption-text gallery-caption'>
    				" . wptexturize($attachment->post_excerpt) . "
    				</{$captiontag}>";</strong>
    			$attributes = array(
    				'data-galleryid'   => $instance,
    				'data-link'   => wp_get_attachment_image_src( $id, "full" ),
    				);
    			$output .= wp_get_attachment_image( $id, 'pageWidth', false, $attributes);
    		}

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    here is video : http://screencast.com/t/DS9O1Suk4

    Is there any another way to add caption over the image and not as slider

    Thanks

  4. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    Here's how i would do it.

    1. Add caption as a data attribute (data-caption), underneath data-link

    2. Using the onPrevNextEvent event in the javascript, code it up so that

    - when the slide changes, you populate a div with the caption
    - then you position:absolute the div over the image

    3. Write the correct CSS so that it works (this is not simple and will take a lot of tinkering around)

    ...

    You might be able to do it the way you're doing it, but i think you need to mess around with the css in order to get it right.

    Let me know if this works.

  5. managunjikar
    Member
    Posted 6 months ago #

    OK i will try and let u know if it works or not.I added attribute for images just fetching part to div is left

    here is added code

    $attributes = array(
    				'data-galleryid'   => $instance,
    				'data-link'   => wp_get_attachment_image_src( $id, "full" ),
    				<strong>'data-caption' => wptexturize($attachment->post_excerpt)</strong>
    				);
    			$output .= wp_get_attachment_image( $id, 'pageWidth', false, $attributes);

    thanks for reply

  6. managunjikar
    Member
    Posted 6 months ago #

    Hey Jorge Silva-Jetter,
    Please help me to how to fetch that caption into div I have tried so much but not got success.I will do css part just after caption is fetching in div just need to fetch it into div.

    Please Reply
    Thanks

  7. managunjikar
    Member
    Posted 6 months ago #

    Hey Jorge
    Happy to to told that i have resolve this problem by adding only 1 function in java script and it works

    1) What i do is add alt attribute as caption for image which

    $attributes = array(
    				'data-galleryid'   => $instance,
    				'data-link'   => wp_get_attachment_image_src( $id, "full" ),
    				'alt' => wptexturize($attachment->post_excerpt),
    				);

    2) after that by referring this link http://jquery.malsup.com/cycle/caption.html

    add `after: function() {
    jQuery('#image_caption').html(this.alt);
    },`
    in Javascript

    And it works Please update plugin for image caption If above code is suitable and give caption on/off link to admin setting.

    Thanks

  8. managunjikar
    Member
    Posted 6 months ago #

    thanks buddy for great Plugin

  9. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    Glad you resolved it! It's always useful to learn some jQuery!

    I might put some feature in for caption... or I might not. Right now, I'm more interested in keeping it simple and clean, which is the reason why I made the plugin in the first place, but thanks for the tip!

    If you like the plugin, please review it!

    http://wordpress.org/support/view/plugin-reviews/jsj-gallery-slideshow

  10. dalejones789
    Member
    Posted 5 months ago #

    Hi,
    I'm looking to add the exact same functionality to a wordpress site i'm working on. I'm a bit confused. Could you tell me:
    i) what code I need to add,
    ii) the files i need to add it to, and
    iii) the line i need to add it on?

    Any help would be much appreciated. Great plugin, just want to add short comments to it!

  11. managunjikar
    Member
    Posted 5 months ago #

    hey dalejones789

    is u downloaded that plugin if yes

    open file jsjSlideShow.php

    find comment // Start Gallery HTML Code

    below of this comment there is foreach loop. in that you just add attribute what you wanted.

    then find comment // Add Code to initiate Galleryjsj-slide-showf

    in that javascript get that attrubute

    that's it var readtitle = jQuery(this).attr('image_title');

    for ex:

    i have pass attribute

    $attributes = array(image_title' => wptexturize($attachment->post_title)
    				);

    and getting that in js with this code var readtitle = jQuery(this).attr('image_title');

  12. Jan
    Member
    Posted 1 month ago #

    Sorry but I can't find
    // Add Code to initiate Galleryjsj-slide-showf

    Is it in the jsj-gallery-SlideShow.php file?

  13. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 1 month ago #

    That's from an old version of the plugin. That comment is no longer there.

    The gallery init code is now in js/jsj-gallery-slideshow.js. It's minified, which makes a bit hard to read, but you can take a look at how it works in main.js : https://github.com/thejsj/jsj-gallery-slideshow/blob/master/js/app/main.js

    Then, maybe, copy that over to the main.js into jsj-gallery-slideshow.js, replacing the old content.

    The idea is basically that you add the captions as attributes in the php side, and then look them up with jquery.

  14. Jan
    Member
    Posted 1 month ago #

    Again, thanks for the quick responce, but i'm not a programmer (only good with copy and paste ;-) )
    So this is to difficult for me.

  15. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 1 month ago #

    I don't think copy paste will be enough for this one!

    Wait for a a week or two and I can add this to the plugin. A couple of people have been asking for it already.

  16. Jan
    Member
    Posted 1 month ago #

    that would be great.

  17. cordltx
    Member
    Posted 2 weeks ago #

    Hi Jorge,
    looking forward to have this option!
    thanks for your great plugin, it's amazing how hard is finding a clean and nice slideshow as this.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.