Gallerific plugin hack jquery issue WordPress
- SOLVED
Gallerific is here http://www.twospy.com/galleriffic/
The wordpress plugin is here http://wordpress.org/extend/plugins/photospace/
My testing site is here http://www.antiquetemplates.com/demo-six/the-lankfordpassiv-house/ and I am using the wordpress plugin.
This may be impossible, I have been searching for a solution and had no luck. What I need is this. When you place the mouse over the main image in Gallerific (see my site) and click, you go to the next image. Image navigation is done by clicking the thumbnails, or clicking the main image. I want the main image to link to a larger image. You will see on my testing site a button positioned over the main image at the bottom center, saying "view larger images". This is just an ugly hack I've done completely independent of the plugin. It uses a function that calls the urls of the "large" images created when uploading. I am using "colorbox", a jquery lightbox that will open any link with the correct "rel".<strong> The code below may not be helpful.</strong> This is just the function I use for my ugly hack.
/* Below setup uses , gets all images and links to popup */
function my_attachment_galleries($postid=0, $size='thumbnail', $attributes='') {
if ($postid<1) $postid = get_the_ID();
if ($images = get_children(array(
'post_parent' => $postid,
'post_type' => 'attachment',
'order' => 'ASC',
'orderby' => 'menu_order ID',
'numberposts' => 0,
'post_mime_type' => 'image',)))
foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, $size);
$Captions [] = $NewImage->post_excerpt;
$full_attachment=wp_get_attachment_image_src($image->ID, 'large');//control the attachment size
?>
<a class="full-image" href="<?php echo $full_attachment[0]; ?>" rel="colorbox-popup" title="<?php the_title() ?>">view larger images</a>
<?php
}
}
Answers (1)
Roberto Mas answers:
Do you want it to open in colorbox?
Rick Bible comments:
yes
Rick Bible comments:
by the way, I do not need colorbox installed. I need, when the main image is clicked, that the "rel" for colorbox is recognized and opens the image in colorbox.
Roberto Mas comments:
Well you could try to pass the variables after the images have loaded and overwrite the gallerific js with colorbox
something like this but dynamic :)
$j(window).load(function(){
var url = $j(this).attr('src');
$j(".advance-link img").colorbox({href: "http://www.antiquetemplates.com/demo-six/wp-content/uploads/2011/02/12-1000x666.jpg"});
});
Rick Bible comments:
I'm no pro here. I did add that very code to the js file. What it did was the page loaded fine, I can click through thumbs fine. First time I click the main image, colorbox loads that image. Wow! When I close the colorbox, and click the main image again, it scrolls as default. Seems to be in the right direction anyway. I would want to be able to do this, and scroll through the colorbox view just as I am able to do if I click the "view larger images" that I created. If you think you can do this, give me a quote on cost. Thanks
Roberto Mas comments:
ok i finaly found how to do this. Took me a good couple of hours just give me what you thing it's worth for you.
in jquery.galleriffic.js
replace line 628 to 631
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
by
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="colorbox" href="'+imageData.slideUrl+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
$(".advance-link").colorbox();
Roberto Mas comments:
Oh and after you do this remember not to update the plusgin or remember those chages if you ever update and lose them
Roberto Mas comments:
Never mond my last comment it's not a wp plugin lol
Rick Bible comments:
let me play with this a bit, there are a few issues, first is that it does open colorbox, great, but it shows the same size image. If you notice the hack I did, which shows the colorbox using "large" image size, colorbox will always resize the image based on browser view, which means a large image can be presented. To open the same image, same size in colorbox is redundant. If I can get to work the way I need, I can spend 100.00 on this.
Roberto Mas comments:
Oh yeah your right. Let me see if i can apply a hack on this since you are already loading big images on the page
Roberto Mas comments:
I did this but cant get first image to work hmmm....
// Construct new hidden span for the image
var fixIndex = imageData.index - 1;
alert (fixIndex);
var listItems = $('#full-size-image a:gt('+fixIndex+')').attr('href');
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="colorbox" href="'+listItems+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
$(".advance-link").colorbox();
Rick Bible comments:
They are large, this is good. notice the screen capture I uploaded here, each time a thumb is clicked, I get this