Avatar of katlees
katleesFlag for United States of America asked on

Galleriffic Needs large image to be a clickable link.

I'm using the galleriffic javascript pluggin and when you click on the larger image it moves to the next image in the gallery. I need this to open to a webpage I am pulling from the database tho.  Here is Gallerific similar to what I am using, http://www.twospy.com/galleriffic/example-5.html 

I know the below code is what I need to change, it's the hidden link that the big image uses.
// 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');

Open in new window


And when I try to put php into the href="" spot to pull from my database table depending on the image I'm on it breaks everything. How would I go about modifying this so you only use the thumbnails to move thru the images, and when you click on the big image it can go to a website?

Thanks
JScriptPHP

Avatar of undefined
Last Comment
Bruce Smith

8/22/2022 - Mon
Bruce Smith

comment out the code listed here and put this just after it:


window.location="http://www.yoururl.com/";

Open in new window

ASKER
katlees

Comment out which part of the code? If I comment all 3 lines out and put in your code, when the page loads it automatically jumps to the new website rather than being clickable.
ASKER
katlees

Here's the code in the Galleriffic that strips the url, how do I modify this so only the thumbnails use this? Cause if I get rid of this the links work fine, but then the Thumbnails break of course and become just regular links rather than switching images.

		// Strips invalid characters and any leading # characters
		normalizeHash: function(hash) {
			return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
		},

		getImage: function(hash) {
			if (!hash)
				return undefined;

			hash = $.galleriffic.normalizeHash(hash);
			return allImages[hash];
		},

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Bruce Smith

I downloaded the stuff and am working on it now. I can change the link but the host name doesn't change. Give me a couple minutes, I think I'm close!

cheers
Bruce Smith

Okay, this one took me a while, but I've got a solution for you!

1. You need to modify 2 different files: example-5.html and js/jquery.galleriffic.js


// set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page.
                    // pageload is called at once.
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);
                    return false;
                });

                $("a[rel='bigPic']").live('click', function(e) {
                    if (e.button != 0) return true;
                    window.location="http://www.experts-exchange.com/";
                    return false;
                });

Open in new window


You'll see code like the above towards the bottom of the example-5.html file. You need to copy and paste the code on lines 2 - 13 and copy it right afterward. Gut out all the code inside the function besides the first and last lines. Change the function declaration from
$("a[rel='history']").live('click', function(e) {

Open in new window

to
$("a[rel='bigPic']").live('click', function(e) {

Open in new window


I changed the rel='history' to rel='bigPic'.

Now you need to go to the js/jquery.galleriffic.js file and change one line of code on line 3 where rel="history" to rel="bigPic". This should fix your problem. Cheers

// Construct new hidden span for the image
                var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="bigPic" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
                .find('span.current').css('opacity', '0');

Open in new window

ASKER
katlees

What exactly needs to be stripped from the function at the bottom of example-5.html? You say Gut it, but I don't understand what to gut? I have put in the code you provided tho, overwrote the similar lines of code that was in there before, and it doesn't seem to do anything different with my gallery.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Bruce Smith

Okay - check this link out and see if this is the functionality that you want (more-or-less). In this example, when the user clicks on a thumbnail, the large image shows; but when the user clicks on the large image, the page will go to "https://www.experts-exchange.com/". You can modify this of course, but I think this is what your original question was aimed at...

http://www.patsmitty.com/galleriffic-2.0/example-5.html

The following code-snippet is the original code in the example-5.html. The second code-snippet below is the modified example-5.html for your comparison. The 3rd code-snippet is the original code from the js/jquery.galleriffic.js file. The 4th code-snippet is my modified js/jquery.galleriffic.js code.

1. Original example-5.html

// set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page.
                    // pageload is called at once.
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);
                    return false;
                });

Open in new window


2. Modified code of example-5.html

// set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page.
                    // pageload is called at once.
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);
                    return false;
                });

                $("a[rel='bigPic']").live('click', function(e) {
                    if (e.button != 0) return true;
                    window.location="http://www.experts-exchange.com/";
                    return false;
                });

Open in new window


3. Original js/jquery.galleriffic.js code

// 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+'">&nbsp;</a></span>')
                .find('span.current').css('opacity', '0');

Open in new window


4. Modified js/jquery.galleriffic.js code

// Construct new hidden span for the image
                var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="bigPic" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
                .find('span.current').css('opacity', '0');

Open in new window


Compare the changes in the two files and try out my example at: http://www.patsmitty.com/galleriffic-2.0/example-5.html. You can change the link on line 17 of code-snippet #2 to the link of your choice. I hope this helps.
ASKER
katlees

Perfect thanks sooo much! That works, however, I need the links to be image specific pulled from a database. So I was trying to put the below code in place of what you have that works,
	// set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page.
                    // pageload is called at once.
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);
                    return false;
                });

                $("a[rel='bigPic']").live('click', function(e) {
                    if (e.button != 0) return true;
                    window.location="              
                    <?php
                    $master_information = mysql_query("SELECT * FROM ImageRotator WHERE DateEnd >= '$currentdate' ORDER BY DateEnd ASC;");
                    while($RS = mysql_fetch_assoc($master_information)) {
                    echo ''.$RS['URL'].''."\n";
                    }
                    ?>
                    ";
                    return false;
                });

Open in new window


See my urls are held with my images in a database and when they are on image 2 it needs to goto the url held in the ID #2's database table. Is there a way to do this? Or should I close this, give ya your 500 points and open a new question. ;o) Thanks again so far!
Bruce Smith

Or should I close this, give ya your 500 points and open a new question

Ha, I'm not too concerned with points; I'm just trying to learn myself and help people out. Just leave this open and give me til this evening (  I have to go to work :(  ) to get an example for you to direct from a url from your database. To get you started, think about creating an extra tag, like "name='URL_from_database'" each time you generate an image from your database in the example-5.html file. You shouldn't have to run any queries in the JavaScript Section. It should be inherited from the image tag itself.

See the following and take note of the "name=" attribute.

<li>
                                <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
                                    <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" name="<?php echo($RS.['URL']); ?>" />
                                </a>
                                <div class="caption">
                                    <div class="image-title">Title #2</div>
                                    <div class="image-desc">Description</div>
                                    <div class="download">
                                        <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
                                    </div>
                                </div>
                            </li>

Open in new window


Obviously, for example sake, you'll have the image source and href from your database also, but this is where you'll add the "name" attribute and fill it with the URL from the database.

Then, later today, I'll have to go in and see how to implement this into the click method back in the js/jquery.galleriffic.js file. Do you mind sharing your code like mine above that generates your images from your database. Thanks
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
katlees

You rock!
Sure, my code that I am using to loop thru the database and having the images is
						<?php
              $dbhost = "localhost";
              $dbname = "mydatabase_database";
              $dbuser = "********";
              $dbpass = "*********";
              
              //Connect to database
              
              $link = mysql_connect ( $dbhost, $dbuser, $dbpass);
              
              if (!is_resource($link))
              {
              	die("Could not connect: " . mysql_error());
              }
              
              mysql_select_db($dbname) or die(mysql_error());
                            
              $currentdate = date('Y-m-d');
              $master_information = mysql_query("SELECT * FROM ImageRotator WHERE DateEnd >= '$currentdate' ORDER BY DateEnd ASC;");
              while($RS = mysql_fetch_assoc($master_information)) {
              
              echo '<li>'."\n";
								echo '<a class="thumb" name="1" href="http://www.rcgov.org/images/library/'.$RS['ImageName'].'" title="'.$RS['Title'].'">'."\n"; 
									echo '<img src="http://www.rcgov.org/images/library/thumbs/'.$RS['ThumbName'].'" alt="'.$RS['Title'].'" />'."\n"; 
								echo '</a>'."\n"; 
							echo '</li>'."\n"; 
							
              }
              
              ?>

Open in new window

ASKER CERTIFIED SOLUTION
Bruce Smith

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Bruce Smith

P.S. I've got a salient fix the unsupported features! I'll detail on that when you are ready.    Cheers
ASKER
katlees

Sweet! You ROCK! Thanks sooo much! I adjusted it so I can still use images in the folders, first of all I didn't even know I could upload files to the database, and second my clients like to be able to ftp in and see there files or download their images so I have to keep them on a server. But other than that it works like a charm. Thanks so much for all the help and the learning experience, we definitely suped up Galleriffic! ;o)

http://www.rcgov.org/Library Here's the final file that I tweeked and modified for my client, they are very happy. ;o)
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Bruce Smith

Cool! I'm happy to have helped. The galleriffic feature looks nice on that page!

...and you should play around with blobs in your databases as it adds dynamism to your web-pages.

...and thanks for this as I hadn't heard of galleriffic before - I've started a project already that implements it for showcasing a company's products. I think it will turn out nice. I may have some css questions for you though as I am struggling a bit with the layout when I embed it into my pre-existing stylesheet.

Cheers
katereese

patsmitty - I'm also using the Galleriffic plugin, with your tweaks applied (above) to get the main image to link to an external page. When a thumbnail is selected by the user, and its respective image clicked on, a new (and correct) page opens.
However, I'm having issues with the pagination links (i.e. Next, 1, 2 etc.). When a user clicks on a pagination link to go to the next page of 'thumbs' and then clicks on the main image, they're taken to a page related to the previously selected thumb!
I know I need to target the index of the currently selected thumb, but I'm not sure how (I'm relatively new to jQuery). You made reference to further fixes above...

P.S. I've got a salient fix the unsupported features! I'll detail on that when you are ready.

...but have not detailed these in the solution. I would be grateful if you were able to provide some detail/direction.
I've used the exact same code with the exception of the external link opening in a new window. See below:

$("a[rel='bigPic']").live('click', function(e) {
                    if(url==""){
                        url=document.getElementById("thumbs").getElementsByTagName('a')[0].id;
					}			
					
                    //window.location=url; // opens link in same window
					// TO OPEN IN A NEW WINDOW...
					window.open(url);
                    return false;
                });

Open in new window


I look forward to your reply - thank you!
Bruce Smith

@katereese: Yup, I do have the fix for that, it's a 1 liner for you. I have learned some jQuery since assisting @katlees so my above code may end up having some extraneous parts. But anyways, take lines #2 through 8 out of your above snippet and add the following above the "return false;" part:
window.open($(".thumbs li[class='selected']").children('a').attr('id'));

Open in new window

This should work, if not let me know. It's been a little while since I've looked at this stuff.
Cheers
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
katereese

@patsmitty: Thank you! Your one-liner did the trick. The resulting effect can be viewed at http://www.digitalmojo.co.nz/portfolio.php. I've found an alternative use for Galleriffic, and used it to showcase my student work. (The thumbnail opacity needs some work in IE, but I'll get to that later ;) ) Cheers
Bruce Smith

Cool, I'll check it out when I get home.

And damn IE... what a worthless browser.  :)
Bruce Smith

I'm not too sure... my opacity seems to work in both IE 8 modes.

Nice looking site by the way. You present yourself very well! I'm in the middle of re-doing my site as I threw it up in a hurry a long while ago and have just left it.

Cheers
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
katereese

Yep, also not a fan of IE. I'll let you know if/when I find a solution to my IE opacity problem.
With regards to the fix for the external link, I've discovered that my XHTML does not validate (!) because of the inclusion of the “/” character in the id attribute (the url of the external link). Any ideas for a way around this are welcomed (but not urgent, as the previous fix works - thanks!)
Bruce Smith

you can probably do some string manipulation to change the "/" to something that would validate like maybe the following in PHP before you assign it to the element:
while ($row = mysql_fetch_array($result)):
                                    echo("<li>");
                                    echo("<a class='thumb' id='" . str_replace("/", "fwdslash", $row['image_url']) . "' name='" . $row['image_name'] . "' href='doImage.php?image_id=" . $row['image_id'] . "' title='" . $row['image_name'] . "' onclick='url=this.id;' >");
                                    ...

Open in new window

So if the id was "http://www.google.com/" the above function would alter the URL to: "http:fwdslashfwdslashwww.google.comfwdslash". Then, do the reverse via JavaScript just before you open the new window with the desired URL like this:
var url = $(".thumbs li[class='selected']").children('a').attr('id');
url = url.replace(new RegExp("fwdslash", 'g'),"/");
window.open(url);

Open in new window

katereese

Such a straightforward fix - you're a legend! Not only do the main images of the Galleriffic gallery link to external pages, but the gallery's CSS and XHTML also validates! Thank you so much for your help. I've learnt a lot! :)
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Bruce Smith

Cool you're welcome. Glad I could help. If you want to gut out that extraneous code... just remove all the js in the page that refers to the var "url". Anyways, cheers!