1 Topic by coastelem (edited by coastelem 2014-01-07 23:02:33)

  • Registered: 2014-01-06
  • Posts: 6

Topic: still needing help:-) Hyperlink on main image gallery picture?

Hi, right now my gallery has the "hand" when placed over the main image and when clicked causes the image to move to the next one.

I would like to know if there is a way to make the "click" action when hovered over the main image go to a hyperlink.

For example, the gallery is for products. And if someone likes the item they see in the gallery, I want them to be able to click the image and have it take them to the product that is for sale, and not to the next image. The have other options for getting to the next image (the thumbs and/or the upper nav menu) so hyperlink of the main image is smart business management I think.

So, how do I change the "on click - hover" action and add a hyperlink on the image. I suspect adding a hyperlink in the config file?

For example, anything in this code I can add a hyperlink to?


<image imageURL="images/DSC01241.JPG"
    thumbURL="thumbs/DSC01241.JPG"
    linkURL="images/DSC01241.JPG"
    linkTarget="_blank"
    sourcePath="C:\xxxxxxxxxxxxxxxxxxxxxx>
    <title><![CDATA[Three Piece Satin Chrome Shaving Set]]></title>
    <caption><![CDATA[Silver tip brush, double edge razor and holder]]></caption>
  </image>

Thoughts, opinions... Thank you ahead of time.

Another thought occurred to me: does the "caption" field in the JuiceBox program for the main image allow html. Perhaps I can add the link there if it will read html. I suspect though, all it will do is show the program code as part of the text in the gallery?

*** SOLVED to my OK this will work mentality:-)

I took the line from the code above: linkURL="images/DSC01241.JPG"

and changed it to:
linkURL="http://www.mywebsite(dot)com/proddetail.asp?prod=Merkur_Satin_(Matt)_Chrome_Silver_Tip_Three_Piece_Set"

So now when the open link in new window is selected it opens to the product page.

Now I just need to figure out how to change the  "open image in new window" icon in the nav bar?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: still needing help:-) Hyperlink on main image gallery picture?

I would like to know if there is a way to make the "click" action when hovered over the main image go to a hyperlink.

Set imageClickMode="OPEN_URL" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section). and when the user clicks a main image, the corresponding linkURL (from the gallery's XML file) will be opened in the linkTarget tab/window.

Now I just need to figure out how to change the  "open image in new window" icon in the nav bar?

Instructions on how to change the icons in a gallery can be found in the Using Custom Icons section of the Theming Guide.

You can change the rollover tooltip text using the languageList configuration option. Please see here for details.
For instructions on how to set configuration options manually, please see here.
Use the following (changing the text in bold to whatever you like).

languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

3 Reply by coastelem (edited by coastelem 2014-01-08 03:00:00)

  • Registered: 2014-01-06
  • Posts: 6

Re: still needing help:-) Hyperlink on main image gallery picture?

Hi Steven, great information. I am wanting to use the icon and tooltip setup you talk about.

First for the tooltip: Do I understand I just copy

languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

and make my language change.

Q: if so, where do I copy this languageList=

do I put it in the config file? Or is there a file I go to and update that language.

As to the "Instructions on how to change the icons in a gallery can be found in the Using Custom Icons section of the Theming Guide."

I have spent hours on this and get stuck on how to get the icon I want from the icoMoon section (want the shopping cart) into the juicebox.dev icons.

I uploaded the juicbox.dev icons in icoMoon. The JuiceBox icon I want to change is the U=e004 juicebox icon. I selected the cart icon from the icoMoon section, went into the "font" section and changed the U code to 004... BUT now is where I can't figure what to do next. Everything I have tried doesn't do anything.

Juicebox instructions say: "The easiest way to do this is to drag and drop the new icon onto the old icon. This will retain the original Unicode Id".

I can't seem to figure out how to "drag and drop". Banging head:-) I am sure I must be overthinking it...

I guess what I am saying is I did and understand steps 1-9 EXCEPT step 6. Every time I download I get the files (.zip from icoMoon - I guess that part is going right?) but the icon is still the same after I upload the files to my server. Not getting updated to the one I want.

Any ideas. Thanks again for all your help.

Update: Ok, well something I did put the cart into the svg file, but now I ONLY have the cart with two pipes and all my other nav icons are gone? I noticed that when I went to a new browser and noticed the change. I can upload a master file to get my nav icons back, but still don't know how to get that shopping cart icon into the svg files without taking away all the other nav icons? so my Qs in this post are still there:-)

  • Registered: 2012-04-24
  • Posts: 5,924

Re: still needing help:-) Hyperlink on main image gallery picture?

Do I understand I just copy

languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

and make my language change.

Yes.

Q: if so, where do I copy this languageList=

do I put it in the config file? Or is there a file I go to and update that language.

Open your gallery's 'config.xml' file in a plain text editor and add the languageList configuration option as an attribute to the opening <juiceboxgallery> tag.
For example:

<juiceboxgallery
    galleryTitle="Juicebox-Pro Gallery"
    languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"
>

want the shopping cart

Juicebox-Pro already includes a shopping cart icon (for Fotomoto support). You can use this icon instead of the default 'Open Image in New Window' icon by opening the 'jbcore/classic/theme.css' file in a plain text editor and changing line 721 from:

content: "\e004";

... to:

content: "\e00e";

5 Reply by coastelem (edited by coastelem 2014-01-09 01:27:09)

  • Registered: 2014-01-06
  • Posts: 6

Re: still needing help:-) Hyperlink on main image gallery picture?

Hi Steven, appreciate the response and understand what you say.

Can you explain in a little more detail how I would copy/paste from this part of my prior post:

"I uploaded the juicbox.dev icons in icoMoon. The JuiceBox icon I want to change is the U=e004 juicebox icon. I selected the cart icon from the icoMoon section, went into the "font" section and changed the U code to 004... BUT now is where I can't figure what to do next. Everything I have tried doesn't do anything.

Juicebox instructions say: "The easiest way to do this is to drag and drop the new icon onto the old icon. This will retain the original Unicode Id".

I can't seem to figure out how to "drag and drop". Banging head:-) I am sure I must be overthinking it..."

Only reason I would like to figure out how to do this is because the shopping cart icon is a different look than the FofoMoto one.  I can use the Fotomoto one per your suggestion for now, however I am thinking I may want to use that service in the future. That way, at least my two shopping icons would look different and have their own explanation tag. If I use the same shopping cart graphic for both, it may look funny/wierd:-)

Thanks again for your great and detailed assistance. It really helps...

  • Registered: 2012-04-24
  • Posts: 5,924

Re: still needing help:-) Hyperlink on main image gallery picture?

It looks like IcoMoon have changed their app.

The instructions on our Theming support page refer to their old app which can still be used and can be found here.

Alternatively, if using their new app, try the following.

  • Make sure that the IcoMoon App is up and running and displaying both the 'juicebox.dev' and 'IcoMoon - Free' sets

  • Click the pointer icon in the IcoMoon toolbar to select 'Select' mode.

  • Select all the 'juicebox.dev' icons except the one you want to replace and select the icon from the 'IcoMoon - Free' set that you would like to use.

  • Click the 'Font' button at the bottom, find the new icon and change its code (by double-clicking the existing code and typing over it) to that of the icon from the 'juicebox.dev' set that you are replacing (in your case 'e004').

  • Click the 'Preferences' button at the top and change the name of the set from 'icomoon' to 'juicebox'.

  • Click the 'Download' button at the bottom and save the font file to your hard drive.

  • Unzip the font file and use the files in the 'fonts' folder to replace the files in your gallery's 'jbcore/classic/fonts'.

I will ensure that the instructions on the web page are corrected in the next site update.