WordPress.org

Ready to get started?Download WordPress

Forums

FancyBox for WordPress
Add Custom Fields utilizing 'NextGen Custom Fields' Plugi (8 posts)

  1. OwenMack
    Member
    Posted 2 years ago #

    Hello!
    Firstly I must admire this plugin, really helped me create a streamline clean and cool look for my portfolio site I am working on.

    I have a pretty particular PSD I am trying to replicate in the fancybox view but more importantly I have content that needs to be displayed in the gallery view. (i.e. Link to live websites, description, title, etc.)
    And if all goes well I wish to have the description displayed via a hover over a link added to the fancybox template.

    My questions are:

    If I have a PHP variable containing a custom html/text field, where do I place it?

    Will NEXTGEN and FancyBox for WordPress be able to communicate these custom fields?

    Is there an easier way to do this, rather than using the NextGen Custom Fields plugin?

    I am no PHP or JS expert but I do know enough to make some edits ;)
    As I have done on my portfolio site I am currently working on.

    I was hoping someone might be able to send me in the right direction, I have been scourging through PHP/JS files the past few days in means of figuring this out.

    Any help is appreciated!

    Thanks Alot!

    Eoghan

    The website under development can be viewed at:
    http://www.eoghanmcinerney.com/wordpress

    http://wordpress.org/extend/plugins/fancybox-for-wordpress/

  2. oliviadesens
    Member
    Posted 2 years ago #

    hello may be you could use the post content of your images: the description area of your photo and call it in the loop . You will only have to replace :

    title="<?php echo $photo->post_title; ?>"
    by
    title="<?php echo $photo->post_content; ?>"

    Example of loop : `

    <a id="fancy_gallery<?php echo $key; ?>" href="<?php echo $full_image_url[0]; ?>" rel="gallery" <?php if(!empty($pp_display_image_title)) { ?> title="<?php echo $photo->post_content; ?>" <?php } ?><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/white_slider_handle.png" alt=""/></a>

    if you need to have also the title and the legend in fancybox, just write it in you description area, because it's take html instructions like </br>, etc... I didn't test with a link, but why not...
    This is the easiest way i found to have my description in fancybox.

    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]

  3. oliviadesens
    Member
    Posted 2 years ago #

    I just test to put a link in the description, and as it doesn't work, I found this : you only have to take care of how you write your quoted and it will work :

    use single quoted not double quoted :

    <a href='example.com'>work</a>
    instead of
    <a href="example.com">doesn't work...</a>
  4. OwenMack
    Member
    Posted 2 years ago #

    Thanks!

    But you will have to excuse me, I am not quite sure where and in which document would I place that loop?

    Could it be contained in a DIV with some sort of JS appended to it for a drop down effect? (Just curious if you might know which file I would call the JS from, could I write in the .php file? (If thats where these edits are being placed)

    Once again thank you very much!

    Eoghan

  5. oliviadesens
    Member
    Posted 2 years ago #

    ok i don't use nextgen, but i download it to see how it works.
    I have a few question :
    Did you already display your photos in fancybox using nextgen ? And does it work well ?
    If yes, can you confirm than your title are not display by fancybox, or you have your title displayed and you would have the description ?

    in waiting your answer, i found this in the easy fancybox plugin section on the wordpress.org :

    ADVANCED
    Will a WordPress generated gallery be displayed in a FancyBox overlay?
    Yes, but only if you used the option Link thumbnails to: Image File when inserting the gallery! The gallery quicktag/shortcode should look something like [gallery link="file"].

    Will a NextGen gallery be displayed in a FancyBox overlay ?
    It can be. Switch OFF the FancyBox Auto-gallery feature, then set the NextGen option "JavaScript Thumbnail effect" to "Custom" and fill the code line field with
    class="fancybox" rel="%GALLERY_NAME%"

  6. oliviadesens
    Member
    Posted 2 years ago #

    give also a look at this post :
    fancybox nexgen description

  7. OwenMack
    Member
    Posted 2 years ago #

    Thanks,
    The Forum post linked above is a similar scenario. I wonder how different the operation would be, as I am using FancyBox for WordPress plugin while that is Easy Fancybox plugin.

    And Yes, I am currently displaying the NextGen gallery using the latest version of "Fancy Box for WordPress" plugin.
    Example is at: http://www.eoghanmcinerney.com/wordpress

    It works quite well. I am pleased with the benefits of both of these plugins put together.

    Nextgen takes a single text input area called "Title" and applies it to the Title/Alt tag of the image thumbnail.

    NG then takes a single text input area called "Description" and applies it to the Title of the the HREF to the fancybox display. This is than displayed underneath the image in fancybox as the title.

    I need to find that line of code where:
    The thumbnail's HREF title is being called to display under the picture and replace it with a <div> containing PHP calls for custom fields.

  8. OwenMack
    Member
    Posted 2 years ago #

    I was looking through the jquery.fancybox.js file associated with the plugin and came across this line of code. I thought it may have had something to do with the rendering of the title tag in the fancybox view:

    /*
    	 *	Title helper
    	 */
    
    	F.helpers.title = {
    		beforeShow: function (opts) {
    			var title, text = F.current.title;
    
    			if (text) {
    				title = $('<div class="fancybox-title fancybox-title-' + opts.type + '-wrap">' + text + '</div>').appendTo('body');
    
    				if (opts.type === 'float') {
    					//This helps for some browsers
    					title.width(title.width());
    
    					title.wrapInner('<span class="child"></span>');
    
    					//Increase bottom margin so this title will also fit into viewport
    					F.current.margin[2] += Math.abs(parseInt(title.css('margin-bottom'), 10));
    				}
    
    				title.appendTo(opts.type === 'over' ? F.inner : (opts.type === 'outside' ? F.wrap : F.skin));
    			}
    		}
    	};

    Any thoughts?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic