How to Display a Popup via an Image with Shack Toolbox Pro

Documentation for Joomla 3

With the Shack Toolbox Pro Joomla extension, you can display a popup via an image in Joomla 3 content.

In this tutorial, you will learn how to use an image within a Joomla article to display your Shack Toolbox Pro popup. For my demonstration, I set my popup to display a Joomla 3 article.

Firstly, you set your Joomla 3 popup to display your preferred article.

  • In your Shack Toolbox Pro, go to the "Module" tab, click on the "Joomla Article" box and select your required Joomla article. As you can see on the image below for my tutorial I selected the article with the title "Koala":

selected joomla article

  • Assign this module the required page(s) and the "debug" position:

assign your popup the debug position

Well done! Next, you have a small problem to solve.

By default, Shack Toolbox Pro will display to your Joomla site visitors a toggler, a button. They would click on it to open your Shack Toolbox popup. Your goal, however, is to replace this default button with an image.

The button has to go. Let's hide it.

  • Click the "Location & Effects" tab:

click location and effects tab

  • Click "Before opening":

click before opening

  • Click "Hidden":

click hidden

Good job! Now let's give our popup a small opening effect.

  • Click "After opening":

click after opening

  • Click "Lightbox - Fade-in":

click lightbox fade in

Excellent! You are one step away from creating a clickable image. 

  • Click "How to Display Shack Toolbox via Menu item, HTML and JavaScript":

click how to display shack toolbox via menu item

  • Under "HTML code" > "Open by image", copy the HTML code resembling <a href="#" class="pwebbox99_toggler"><img src="/..."></a>

find this link

  • Add your image path inside the <src="..."></a> tag. The image path to the image I used for this tutorial was images/sampledata/parks/animals/800px_koala_ag1.jpg.
  • Click "Save & Close".

Good job! You are ready to test the final result.

Go to your Joomla 3 site frontend, open your article and click the image. You will see the popup opening:

final result

Documentation for Joomla 4

With Shack Toolbox Pro you can display a popup via an image in a Joomla 4 content item.

In this tutorial, you will learn how to use a clickable image to show a Joomla 4 article in a popup.

  • In your Shack Toolbox Pro module, click on the "Joomla Article" box, as you can see in the image below:

Click the Joomla Article box

  • Use the "Select article" field and select your required Joomla 4 article. As you can see on the image below, for my tutorial I selected the article "Joomla":

Select a joomla 4 article

  • Assign this module the "debug" position:

assign your popup the debug position

  • Go to the "Menu Assignment" tab and assign this module to the required menu items.

Well done! Next, you have a small problem to solve.

By default, Shack Toolbox Pro will display to your Joomla 4 site visitors a toggler, a button. They would click on it to open your Shack Toolbox Pro popup. Your goal, however, is to replace this default button with a clickable image.

The button has to go. Let's hide it.

  • On the "Location & Effects" tab, click "Before opening":

On the Location & Effects tab, click Before opening

 

  • Click "Hidden":

click hidden

Good job! Now let's give our popup a small opening effect.

  • Click "After opening":

Click after opening

  • Click "Lightbox - Fade-in":

click lightbox fade in

Excellent! You are one step away from creating a clickable image. 

  • Click "How to Display Shack Toolbox via Menu item, HTML and JavaScript":

click how to display shack toolbox via menu item

  • Under "HTML code" > "Open by image", copy the HTML code, as shown in the next image:

Copy the Open by image HTML code

  • Inside your selected Joomla 4 article, add your image path inside the <src="..."></a> tag. Here is the path to the image I used for this tutorial:
    images/sampledata/cassiopeia/nasa1-640.jpg
  • And here is what the whole HTML code snippet would look like:

html source code

  • Click the "Theme" tab and select a theme. For my tutorial, I selected "Beez3":

Click the Theme tab and select a theme

  • Click "Save & Close".

Good job! You are ready to test the final result.

Go to your Joomla site frontend, open your Joomla article and click the image. You will see the popup opening:

final result