Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

help with gallerific and colorbox link on my site WordPress

  • SOLVED

The page I am working on is here
http://www.antiquetemplates.com/demo-eight/category/for-sale/
Notice the link on the left column "view full screen", if the link is outside the "script" it will call the colorbox overlay. If you turn off javascript, the link will link to the larger attachement image, clicking the link within the gallerific caption or slideshow container, it goes no where. Colorbox does does not work within gallerific. Each image in gallerific is acually a post, so when you slide to another image, the text shows from the post, along with the link "view full screen" for that post. I want the colorbox to be able to go through as a slideshow if the link "view full screen" is clicked.

Answers (2)

2011-05-14

Christianto answers:

</code>
Hi Rick,

Please download [[LINK href="http://docs.jquery.com/Plugins/livequery"]]livequery plugin[[/LINK]] an put it on your gallerific folder.

Include it on wp head with your load_my_script function

function load_my_scripts() {
if ( is_category() && !is_category(1) ) :
$dir = get_stylesheet_directory_uri();
wp_enqueue_script( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '1.0', true );
wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/gallerific/galleriffic-5.css', array(), false, 'screen' );
wp_enqueue_script( 'gall-jquery', get_stylesheet_directory_uri() . '/gallerific/jquery-1.3.2.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'galleriffic', get_stylesheet_directory_uri() . '/gallerific/jquery.galleriffic.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'opacityrollover', get_stylesheet_directory_uri() . '/gallerific/jquery.opacityrollover.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'gallfunction', get_stylesheet_directory_uri() . '/gallerific/jquery.gallfunctions.js', array( 'jquery' ),true, 0.1 );
wp_enqueue_script( 'livequery', get_stylesheet_directory_uri() . '/gallerific/jquery.livequery.js', array( 'jquery' ),true, 1,1 );
endif;
if ( is_page_template ('landing-page.php') || is_page_template ('contact.php') ) :
$dir = get_stylesheet_directory_uri();
wp_enqueue_style( 'galleries', get_stylesheet_directory_uri() . '/galleries.css', 'screen' );
endif;
if ( is_page_template ('contact.php') ) :
$dir = get_stylesheet_directory_uri();
wp_enqueue_style("gforms_css", WP_PLUGIN_URL . "/gravityforms/css/forms.css");
endif;
}

Initialize your colorbox under livequery function..

<script type="text/javascript">
// <![CDATA[
$j = jQuery.noConflict();
$j(document).ready(function(){
$j('a.colorbox').colorbox();
$j("a[rel='example1']").colorbox();
$j("a[rel='example2']").colorbox({transition:"fade", width:"90%", height:"90%"});
$j("a[rel='colorbox-popup']").livequery(function(){
$j(this).unbind();
$j(this).colorbox({transition:"none", height:"90%"});
});
$j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$j(".form").colorbox({width:"450px", inline:true, href:"#form"});

});
// ]]>
</script>


Tell us the result,
Thanks


Rick Bible comments:

at least the "view full" had a response. Take a look. The image does not show in the colorbox, but does pop up. Not quite right but at least there is a change,


Christianto comments:

Rick, have you include your lightbox/colorbox css and all images?
The colorbox just not style properly now.


Christianto comments:

Sorry for my English..
Above should be
<em>Rick, Did you have include your lightbox/colorbox css and all images?
The colorbox just not style properly now.</em>

:D


Rick Bible comments:

Let me go over the code and test out, take me about 15 minutes...


Rick Bible comments:

ok, css missing. Works well. I want to be able to "navigate" through colorbox here. Go through as a slideshow. Works great though


Christianto comments:

Navigate to one photo to another in the lightbox style, with next/prev on the lightbox?


Rick Bible comments:

yes. my code normally just does that, you can view here
http://antiquetemplates.com/demo-six/french-provencial-walnut-commode/
the thumbs in the carousel... it's the same code, but on this project we are working on, the rel='colorbox-popup' images are not pulling together. I do not know jquery at all.


Christianto comments:

Hi Rick,
I think thats not possible.
In order to make the colorbox show the images like that, a group of link with rel="colorbox-popup" should exists

<a class="colorbox" rel="colorbox-popup">See full image 1</a>
<a class="colorbox" rel="colorbox-popup">See full image 2</a>
<a class="colorbox" rel="colorbox-popup">See full image 3</a>
<a class="colorbox" rel="colorbox-popup">See full image 4</a>
<a class="colorbox" rel="colorbox-popup">See full image 5</a>


Because the link is located on your caption, each time the thumbnail clicked, Gallerific will remove and add new caption element including the <a> tag for element used by colorbox.
So there only one colorbox <a> element exists on the page.
So only recognize 1 element to be use and won't treat it like gallery.

Hope this help..


Rick Bible comments:

ok, things have changed as far as how to pay on this site. Normally I would just choose you as the "winner", best answer. What do I do now to make sure you get payed through wpquestions?


Christianto comments:

Please [[LINK href="http://codewi.se/2011/04/22/voting-assign-prize-money/"]]read this post[[/LINK]]..

Thank you..

2011-05-14

Duncan O'Neill answers:

Hi Rick,

first clue is that clicking the 'view full screen' link is throwing a js error;

Error: b.data(this, r) is undefined
Source File: http://www.antiquetemplates.com/demo-eight/wp-content/themes/child-client/colorbox/jquery.colorbox-min.js?ver=1.0
Line: 4

More soon...

Duncan


Rick Bible comments:

ok,


Duncan O'Neill comments:

In the colorbox demo

http://colorpowered.com/colorbox/core/example1/index.html

the colorbox script and settings are called in the <head> of the document.

On the page you link to, the colorbox script is called in the <body> of the document, after the div it is supposed to be operating on. So I think if you tried calling the colorbox script in the head of your document, you may have more success.

Try adding this to the bottom of your functions.php in your theme folder;


function myColorBox() {

wp_register_script( 'myColorBox', 'http://www.antiquetemplates.com/demo-eight/wp-content/themes/child-client/colorbox/jquery.colorbox-min.js');
wp_enqueue_script( 'mtColorBox' );
}

add_action('init', 'myColorBox');


Duncan O'Neill comments:

Sorry, there is a typo in that code. Corrected below;

<code>
function myColorBox() {



wp_register_script( 'myColorBox', 'http://www.antiquetemplates.com/demo-eight/wp-content/themes/child-client/colorbox/jquery.colorbox-min.js');

wp_enqueue_script( 'myColorBox' );

}



add_action('init', 'myColorBox');


Rick Bible comments:

this is what i already have,
function load_my_scripts() {
if ( is_category() && !is_category(1) ) :
$dir = get_stylesheet_directory_uri();

wp_enqueue_script( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '1.0', true );
wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/gallerific/galleriffic-5.css', array(), false, 'screen' );
wp_enqueue_script( 'gall-jquery', get_stylesheet_directory_uri() . '/gallerific/jquery-1.3.2.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'galleriffic', get_stylesheet_directory_uri() . '/gallerific/jquery.galleriffic.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'opacityrollover', get_stylesheet_directory_uri() . '/gallerific/jquery.opacityrollover.js', array( 'jquery' ), 0.1 );
wp_enqueue_script( 'gallfunction', get_stylesheet_directory_uri() . '/gallerific/jquery.gallfunctions.js', array( 'jquery' ),true, 0.1 );
endif;

if ( is_page_template ('landing-page.php') || is_page_template ('contact.php') ) :
$dir = get_stylesheet_directory_uri();
wp_enqueue_style( 'galleries', get_stylesheet_directory_uri() . '/galleries.css', 'screen' );
endif;

if ( is_page_template ('contact.php') ) :
$dir = get_stylesheet_directory_uri();
wp_enqueue_style("gforms_css", WP_PLUGIN_URL . "/gravityforms/css/forms.css");
endif;

}


Rick Bible comments:

all the content div goes blank. Using your code. When I load colorbox in the head, even removing "true" in my enque script, page goes blank. Seems it has to load in the footer?
I use colorbox on a number of sites and did not know there was an error
Maybe this is "wrong"
wp_enqueue_script( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '1.0', true );


Rick Bible comments:

The easy way to test this is to view page source on the link above, copy and save it as an html file and load it in the browser. I can switch js around this way. Moving the above to the head made no difference. Everything worked, but the link still did not load colorbox


Duncan O'Neill comments:

Hmm, ok. Without using the code that I give you above, what happens if you take the "true" argument out of the line loading the colorbox?

Try commenting out the colorbox lines ( add '//' without the quotes to the start of that line ), and replacing it with the line with the code below.


wp_enqueue_script( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '1.0');

best,

Duncan


Rick Bible comments:

everything below the head and above the foot is blank. The content for gallerific is blank


Duncan O'Neill comments:

Rick,

looks like you're ahead of me already.

No, I think that line you refer to is working, because the 'true' tells it to load in the footer, which it seems to be doing.

The only other thing I can think of off the top of my head for now is to try loading the colorbox after the gallerific.

best,

Duncan


Duncan O'Neill comments:

Re your last message: that seems to mean that when you load colorbox in the head before gallerific, it messes up the page. Which was a reason for my last suggestion above.

best,

Duncan


Rick Bible comments:

thanks for the effort, Rick


Duncan O'Neill comments:

Rick,

did you try changing the order, so that colorbox is called AFTER gallerific?

best,

Duncan


Duncan O'Neill comments:

That is, go back to the original code, but place the call to colorbox AFTER gallerific?


Duncan O'Neill comments:

Rick,

I'm pretty sure I'm on the right track, but have a prior arrangement right now I have to meet, sorry. I'll come back in an hour or two, and if it isn't solved, try again to help.

best,

Duncan