Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#129364

I was trying to find a way to place a link in the photos contained in the Highslide module (named as Media in the Modules) so that when the link found in the larger image is clicked, it transports the visitor to an article, section or category relevant to the image shown.

This feature would make the Highslide module very educational and enhances the interactive feature of the Highslide module to introduce the visitor to specific parts of the site.

It is obvious that it is possible to add a link but the “a href” was already used by the larger image but righ now, the link shown is more simply a promotion of a Joomlart module, i.e., the Highslide (see note below).

Of course, I can achieve a more crude way of using an image that when clicked would transport the visitor to an article, section or category relevant to the image shown — using for example a copy of the module called Photography shown in User 8. To implement this, I can replace the script (shown in the Photography in User 8) and place this script in the Media module included in User 6

The main drawback of the aforementioned alternative approach is that it does not show a larger image of the preview thumbnail that is a feature of the HighSlide.

When I changed the in the HighSlide module, the (a href=”‘) content with an actual URL, it attempts to do so, but does not work.

What is the correct way to achieve the above?

Cornelio

Note:
In the larger image, it is indeed possible to add a link, except it points out to a promotions (i.e., advertisement to the Highslide module — as noted by yerg in his post “Powered by Highslide”
http://www.joomlart.com/forums/topic/powered-by-ja-highslide/
I found this criticism valid. I guess one could counter yerg’s criticism by bluntly stating: “You have the option not to use it!” Which is true, but is this really what Joomlart wants to happen?

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#261371

Did you manage to get this solved?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#266891

Hi cgc0202 !
with teline ii template you can change “‘Powered by JA Highslide'” and link for it following way below :
Open indexx.php file in templates/ja_teline_ii folder , find following code section at about line 70 :


<script type="text/javascript">
hs.graphicsDir = '<?php echo $tmpTools->templateurl(); ?>/highslide/graphics/';
hs.showCredits = true; // you can set this to false if you want
hs.creditsText = 'Powered by JA Highslide';
hs.creditsHref = 'http://joomlart.com/';
hs.creditsTitle ='Go to the Highslide JA homepage';
</script>


red text is text and link for it , you can change them.

1 user says Thank You to Sherlock for this useful post

1. felsimedia

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#267967

<em>@hainn84 75390 wrote:</em><blockquote>Hi cgc0202 !
with teline ii template you can change “‘Powered by JA Highslide'” and link for it following way below :
Open indexx.php file in templates/ja_teline_ii folder , find following code section at about line 70 :


<script type="text/javascript">
hs.graphicsDir = '<?php echo $tmpTools->templateurl(); ?>/highslide/graphics/';
hs.showCredits = true; // you can set this to false if you want
hs.creditsText = 'Powered by JA Highslide';
hs.creditsHref = 'http://joomlart.com/';
hs.creditsTitle ='Go to the Highslide JA homepage';
</script>


red text is text and link for it , you can change them.</blockquote>

Hi Hainn,

Yeah I am aware of this already. Because it is the index.php that is changed each of the following

hs.creditsText = 'Powered by JA Highslide';
hs.creditsHref = 'http://joomlart.com/';
hs.creditsTitle ='Go to the Highslide JA homepage';


can be linked only to one URL, e.g., domain name. What I want to do it link each image in the Highslide module specifically either to an article, section, category, domain or subdomain URL, etc. — just like it is possible to link an image in the Hot Topic to an individua article.

As it is now, the JA Highslide is not really very useful, except merely to show a not so large image, There is a better and more powerful application already for that — the JoomlaWorks Single Image Gallery Pro (SIG PRO) — which shows not only larger images but even a slide show of many images, starting with one image. Unfortunately, SIG PROdoes not work for Teline II. Not sure why.

[hmmmm3 Friend hmmmm3Join date: February 2009Posts: 12Downloads:0Uploads:0 Thanks: 2]

#295988

Did you ever get an answer to this question? Or how did you solve it?

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#296003

<em>@hmmmm3 117760 wrote:</em><blockquote>Did you ever get an answer to this question? Or how did you solve it?</blockquote>

hmmmm3,

I still see quite a few new threads about Highslide, as used in the Media module.

After much careful thought, and more research of features and extensions, I found perhaps decent and perhaps more useful alternatives. I outlined these alternatives in response

There are many ways to skin a cat.

to your similar inquiry in my other post:.

I am not sure if it is what you want though.

Cornelio

[hmmmm3 Friend hmmmm3Join date: February 2009Posts: 12Downloads:0Uploads:0 Thanks: 2]

#296017

So I was able to get something to finally work. I didn’t modify the credits link..instead i added a header. I use Trona and what I did was to use a tag called hs.headingEval. More info about this tag can be found at “http://highslide.com/ref/hs.headingEval”

On my site, I read my images from a database of users and I wanted a link to go from the pictures to the users profile on another site. The site is no where near finished, but take a look at the highslide gallery by visiting http://www.roommatesillustrated.com Im not sure if this is the best approach but its a temporary solution. Any feedback is welcome.

Inside my ja_highslide.php code I added the line:
$headtag[] =”hs.headingEval = ”<a href=”mydestinationurl.com” target=”_blank”> Click Here To View Profile</a>”;”;

What this did for me was to create a header above my image that has a clickable url
I also removed all of the “html .=” code that has the back,next, close and more see my commented code below: im not sure if this was necessary or not..but n my desperate attempt at grasping straws it worked.
// $html .= ‘<div class=”highslide-caption” id=”‘.$id_link.'”>
// <a href=”#” onclick=”return hs.previous(this); return false;” class=”control” style=”float:left; display: block”>
// Previous
// <br/>
// <small style=”font-weight: normal; text-transform: none”>left arrow key</small>
// </a>
// <a href=”#” onclick=”return hs.next(this); return false;” class=”control”
// style=”float:left; display: block; text-align: right; margin-left: 50px”>
// Next
// <br/>
// <small style=”font-weight: normal; text-transform: none”>right arrow key</small>
// </a>
// <a href=”#” onclick=”alert(hs.getExpander(this).custom.myAlert)” style=”float:left; display: block; text-align: right; margin-left: 70px”>Member: See profile</a>
// <a href=”#” onclick=”return hs.close(this); return false;” class=”control”>Close</a>
// <a href=”#” onclick=”return false” class=”highslide-move control”>Move</a>
// <div style=”clear:both”> </div>
// </div>’;
//
// $html .= ‘</div>’;

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#296020

<em>@hmmmm3 117797 wrote:</em><blockquote>So I was able to get something to finally work. I didn’t modify the credits link..instead i added a header. I use Trona and what I did was to use a tag called hs.headingEval. More info about this tag can be found at “http://highslide.com/ref/hs.headingEval”

On my site, I read my images from a database of users and I wanted a link to go from the pictures to the users profile on another site. The site is no where near finished, but take a look at the highslide gallery by visiting http://www.roommatesillustrated.com Im not sure if this is the best approach but its a temporary solution. Any feedback is welcome.

Inside my ja_highslide.php code I added the line:
$headtag[] =”hs.headingEval = ”<a href=”mydestinationurl.com” target=”_blank”> Click Here To View Profile</a>”;”;

What this did for me was to create a header above my image that has a clickable url
I also removed all of the “html .=” code that has the back,next, close and more see my commented code below: im not sure if this was necessary or not..but n my desperate attempt at grasping straws it worked.
// $html .= ‘<div class=”highslide-caption” id=”‘.$id_link.'”>
// <a href=”#” onclick=”return hs.previous(this); return false;” class=”control” style=”float:left; display: block”>
// Previous
// <br/>
// <small style=”font-weight: normal; text-transform: none”>left arrow key</small>
// </a>
// <a href=”#” onclick=”return hs.next(this); return false;” class=”control”
// style=”float:left; display: block; text-align: right; margin-left: 50px”>
// Next
// <br/>
// <small style=”font-weight: normal; text-transform: none”>right arrow key</small>
// </a>
// <a href=”#” onclick=”alert(hs.getExpander(this).custom.myAlert)” style=”float:left; display: block; text-align: right; margin-left: 70px”>Member: See profile</a>
// <a href=”#” onclick=”return hs.close(this); return false;” class=”control”>Close</a>
// <a href=”#” onclick=”return false” class=”highslide-move control”>Move</a>
// <div style=”clear:both”> </div>
// </div>’;
//
// $html .= ‘</div>’;</blockquote>

hmmmm3;

Yes, it can be done that way. My question is do you manually have to replace the content? clicked at the images in your site Highslide module and they still do the standard enlarge. They do not link to a specific page and they are not refreshed dynamically with new contents?

There must be a way to randomize or dynamically change the content, just like the way contents change in the Frontpage or JA News modules — such that instead of clicking on a text link, clicking the images in the Highslide module will direct you to the appropriate full page of the relevant article.

Cornelio

[hmmmm3 Friend hmmmm3Join date: February 2009Posts: 12Downloads:0Uploads:0 Thanks: 2]

#296025

My images are dynamic. My images are of the most recent members that have joined a roommate matching site called rumates.com. Behind the scenes I do a database query and get the url for the profile of interest. The destisnation url changes with the profile. Right now, the destination url doesn’t exist, but if you click on the link in the enlarged picture that say “Click here to view profile”, you will go to a custom url that is atttemping to find that specific usr. The images change/refresh whenever a new member joins. They still also enlarge when you click on them too…..

When i was first trying to so this…i kept running into syntax issues..but after I got over that..it worked. Take a look at it.

http://www.roommatesillustrated.com
-Jarvis

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#296481

<em>@hmmmm3 117806 wrote:</em><blockquote>My images are dynamic. My images are of the most recent members that have joined a roommate matching site called rumates.com. Behind the scenes I do a database query and get the url for the profile of interest. The destisnation url changes with the profile. Right now, the destination url doesn’t exist, but if you click on the link in the enlarged picture that say “Click here to view profile”, you will go to a custom url that is atttemping to find that specific usr. The images change/refresh whenever a new member joins. They still also enlarge when you click on them too…..

When i was first trying to so this…i kept running into syntax issues..but after I got over that..it worked. Take a look at it.

http://www.roommatesillustrated.com
-Jarvis</blockquote>

Hi Jarvis,

It did change since the last time I viewed it. I have some questions:

Actual scripts

Can you please provide the actual javascript, enclose them in the php, like this

[PHP]Highslide java script[/PHP]

as well as the one that was contained in the Highslide module (called media) in the Menu admin page in the Backend of your site? Please provide in uncommented html code, like this

Media script here

Source(s) of Links and Images
Why did you opt to use an external site? As it happens, does this mean that the latest that joined in that site going to be the one that also goes into your Highslide module? Or, you have to manually select the best roommates possible. Are the images coming from your site or captured from the other sites, like consolidator internet sites do?

<em>@hmmmm3 117806 wrote:</em><blockquote>
My images are of the most recent members that have joined a roommate matching site called rumates.com.</blockquote>

I am not sure about the other site, it is true that your look dynamic but let us say I point it to Craigslist Boston — many of those listing their roommate ads are undesirable or may not be in my target locations, or some are just advertisements from real estate agents.

I wonder why you did not point the link to a section within your main site itself.

Most recent vs Randomize
The module that you have now has about a dozen roommates choices. What if the best one for me is the one that is no longer in the list because he is #14 or #30?.

Unless you control the other site, then you are stucked with the latest dozen found in the module. A way around this is randomization. However, it does not correct a flaw in the strategy.

Unless you control the other site, you will actually become an unpaid hosting service driving traffic to the other site. Because once they are there, then if the person did not appear to be desirable, they can search the other site.

You might want to use the Teline II, where you can have multiple sections, and use one of the sections to post the profiles of the people. That way, the link goes within the original site, and then people can explore within that dedicated section in case what they are looking for is not in the photos in the module.

Cornelio

[hmmmm3 Friend hmmmm3Join date: February 2009Posts: 12Downloads:0Uploads:0 Thanks: 2]

#296497

Forgive my lack of posting skills. Im new at this.

Cornelio, I only changed one file. ja_highslide.php. I added this line to the top of the code.
PHP Code:
————
[PHP]$headtag[] =”hs.headingEval = ”<a href=”http://www.rumates.com/’+this.captionText+’ ” target=”_blank”> Click Here To View Member Profile</a>”;”;[/PHP]
————
This line will take my caption text and create a url hyperlink header. Below I define the contents of captionText.

Further down in my code I actually connect with the server at http://www.rumates.com and find the profiles of the ten most recent members. I only modified the code for the function highslide_slideshowcaption. Depending on how you have your module set up, you may have to modify another function to make it work.

PHP Code in function highslide_slideshowcaption:
——————-
[PHP]//this code is tucked away in an include file
$option = array(); //prevent problems
$option[‘driver’] = ‘***********’; // Database driver name
$option[‘host’] = ‘********; // Database host name
$option[‘user’] = ‘*********’; // User for database authentication
$option[‘password’] = ‘******’; // Password for database authentication
$option[‘database’] = ‘*******”; // Database name
$option[‘prefix’] = ‘***********’; // Database prefix (may be empty)
//end of include file
$db = & JDatabase::getInstance( $option );

$query = “*********** order by date_reg desc limit 0, 12”;

$db->setQuery($query);
$result = $db->loadObjectList();

foreach ( $result as $results ){
$pic=1;
//$path_img = trim($list_img[$i]);
$path_img = trim(“http://www.rumates.com/files/user_pics/”).$results ->id.”_”.$pic.”.jpg”;

//$thumb_img = trim($list_img[$i]);
$thumb_img = trim(“http://www.rumates.com/files/user_pics/thumb/thumbnails”).$results ->id.”_”.$pic.”.jpg”;
$width = ‘width=”60″‘;[/PHP]
———————————
From here I modify the variable $html with my query results. I am trying to modify the javascript that will be located in the final file. This is located in the {else} statement right before the end of the function. Also note, I am also assigning a value to the header, captionText.

PHP Code to create html string:
—————-
[PHP]$html .= ‘<a id=”thumb’.$i.'” href=”‘.$path_img.'” style=”padding-right:7px;”
class=”highslide” onclick=”return hs.expand(this,{‘.$paras[‘override’].’,captionId:”.$id_link.”, slideshowGroup:”.$id_link.”,captionText:”.$results->username.”,captionOverlay:”.$results->username.”} );”>’;

$html .= ‘<img src=”‘.$thumb_img.'” alt=”‘.$thumb_img.'” title=”Click to enlarge” ‘.$width.’ />’;
$html .= ‘</a>’;[/PHP]
—————-

Everything else in the code is the same.

You also asked another question:
<blockquote>Why did you opt to use an external site? As it happens, does this mean that the latest that joined in that site going to be the one that also goes into your Highslide module? Or, you have to manually select the best roommates possible. Are the images coming from your site or captured from the other sites, like consolidator internet sites do?

I am not sure about the other site, it is true that your look dynamic but let us say I point it to Craigslist Boston — many of those listing their roommate ads are undesirable or may not be in my target locations, or some are just advertisements from real estate agents.

I wonder why you did not point the link to a section within your main site itself.</blockquote>
————–
We also own the other site. So it won’t hurt us if a user ends up at the other site. We can always randomize the picturesit…and we probably will at some point….. We don’t do any matching on the joomla site. Its purpose if for information so the pictures that will show up will wither be random or the newest members. If I were to point this at Craigslist I would get undesirable results, just like I have now.

If both sites were fully integrated, I would use the highslides to show the pictures of roommate matches. Which again, would be implemented like I am doing now. Except the images would be custom matches.

But, for now, the purpose of highslides is really for “eye candy.” Having the linking capability is really a plus because it gives the pictures a purpose, rather than just being a photo album. If a user wants to actually find a roommate they will have to go to the other site. It would be nice to combine both sites, but a very large task.

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#296502

Just a note, you know how to include a tag to the codes of highslide to display the name of the article for example below the picture file that is loaded and to link such to the article it belongs too?

But it appears that the forum did not show the last page and post when I opened the thread, so seems you got the solution already!

[hmmmm3 Friend hmmmm3Join date: February 2009Posts: 12Downloads:0Uploads:0 Thanks: 2]

#296509

Im not 100% sure about including a url below the picture. During my test and trials I only got something to appear at the bottom when I commented out the code below found in ja_highslide.php, and even then it was tough with a url:

PHP code:
[PHP]$html .= ‘<div class=”highslide-caption” id=”‘.$id_link.'”>
<a href=”#” onclick=”return hs.previous(this); return false;” class=”control” style=”float:left; display: block”>
Previous
<br/>
<small style=”font-weight: normal; text-transform: none”>left arrow key</small>
</a>
<a href=”#” onclick=”return hs.next(this); return false;” class=”control”
style=”float:left; display: block; text-align: right; margin-left: 50px”>
Next
<br/>
<small style=”font-weight: normal; text-transform: none”>right arrow key</small>
</a>
<a href=”#” onclick=”return hs.close(this); return false;” class=”control”>Close</a>
<a href=”#” onclick=”return false” class=”highslide-move control”>Move</a>
<div style=”clear:both”> </div>
</div>’;
$html .= ‘</div>’;[/PHP]

I think “captionText” will automatically write its contents in the bottom. You may need to play around with this. I ultimately resorted to the top because I could not get the hyperlink to work. I may have used incorrect syntax….but Im not sure. I do know that I would receive browser errors(i.e, unable to open page”) when I used a header tag along with the captionText below the image. The errors went away when I uncommented the above code and used only my headertag. http://highslide.com/ref/ has an api for different functions to use as well as some other examples.

What helped get me started on a solution for cgc0202’s original questions is found here:
http://highslide.com/forum/viewtopic.php?f=1&t=2412&p=10940&hilit=url+header#p10940

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#296537

Hi Jarvis,

I thought you might indeed own the other site. Maybe you can take a greater bite from Craigslist, using a different business plan, where EBay, after spending millions and millions of dollars, so far is not making much dent.

That was why they bought the shares from a former Craigslist shareowner got some inside information, then tried to use the court to takeover Craigslits.

Or, that is how it appeared to me though reading about the course of events regarding the relationship of Craigslist and EBay.

What you propose of interacting the two would be good business strategy. That was why initially I was enamored with the Highslide. But, as presented, the current Media module in the Teline II is so rudimentary, it is useless, as far as I am concerned.

Honestly, I do not have background in scripting, so I find it difficult to understand the script. But, it works, as you set out to do. Maybe I will ask more information from you in private, to check if your script my have some applications for my own sites.

I have been trying to find a way to crosslink my individual gazillion galleries to a text site, but I have not found an automated way of crosslinking that would go down to specific pages of a Joomla site.

Cornelio

[Author]

Posts