How to Display a Popup via an Image with Shack Toolbox

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

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

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

  • In your Shack Toolbox, 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 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":

How to Display a Popup via an Image with Shack Toolbox

  • 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 site frontend, open your Joomla article and click the image. You will see the popup opening:

final result