We have gone through most of the Artisteer features and you can by now design and use your own templates. The last thing to cover is some tips and tricks—techniques that will allow us to achieve effects, not available in Artisteer directly. They would require a little modification of the exported code, but don't worry, the changes won't be difficult, and I will always describe the changes. The examples here are the common questions that I have been asked by many Artisteer users. I'm sure you will have your own questions too. A good source of tips and tricks is the subscription of the Extensoft newsletter, in which some nice tips are published. Also a good source of knowledge is Artisteer's official website www.artisteer.com and Szablonik (www.szablonik.net)—another website devoted to Artisteer. You may also look at my blog: http://artisteer.fajnyblog.eu, where I publish tips from time-to-time.
This tip applies to HTML templates.
An example project would be the slidesAsLinks.artx file.
In this tip, I will show you how to modify the slideshow to make each slide (or some of them, it's up to you) linked to other websites.
When you create a slideshow, you can define particular images, but you can't set any of the slides as links. The first idea is of course to click anywhere in the article and then navigate to Edit | HTML in the menu to show the source of the article containing the slideshow and do the proper modification without going out of the program. Let's do it.
- In place of the slideshow, you will find something like the following:
<div class="image-caption-wrapper" style="width: 55%; float: left"> [collage_79] </div>
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
- Oops! It looks like Artisteer presents the slideshow not as source code, but as a special tag. The whole slideshow is presented as
[collage_79](the number may differ, but the overall pattern is always the same). - Well, we have no other choice but to export the template, and then edit the source. Export the template as a folder and open the
index.htmlfile in the text editor. Look for the part of code responsible for displaying the slideshow. You will find something similar to the following:<div class="art-slider art-slidecontainer79"> <div class="art-slider-inner"> <div class="art-slide-item art-slide790"></div> <div class="art-slide-item art-slide791"></div> <div class="art-slide-item art-slide792"></div> <div class="art-slide-item art-slide793"></div> </div> </div> - Let's add some comments to the code to make it more clear:
<!—- The external container, containing the slideshow --> <div class="art-slider art-slidecontainer79"> <!—- slideshow container --> <div class="art-slider-inner"> <!-- first slide --> <div class="art-slide-item art-slide790"></div> <!-- second slide --> <div class="art-slide-item art-slide791"></div> <!-- third slide --> <div class="art-slide-item art-slide792"></div> <!-- forth slide --> <div class="art-slide-item art-slide793"></div> </div> </div>The slideshow is displayed as two containers, and the inner one contains its own inner containers—in particular, slides. Each slide is represented as a
<div>element (before the jQuery script in the<header>section does its job). - To make each slide a link, we are going to add some basic JavaScript to each slide; specifically, we are going to handle
onClickevents (in other words, we will define what should happen when a visitor clicks on this<div>element representing a particular slide). Because this is only a single-line script, there's no need to separate it as a<script>element in the code.We are going to add something according to the following pattern:
onclick=location.href('address_to_be_redirected_to')For example:
onclick=location.href('www.google.com')This
onclickevent will redirect the visitor to www.google.com. - Let's modify our code and add the links:
<div class="art-slider art-slidecontainer79"> <!—- The external container, containing the slideshow --> <div class="art-slider art-slidecontainer79"> <!—- Slideshow container --> <div class="art-slider-inner"> <!-- First slide. Link to: www.artisteeer.com --> <div class="art-slide-item art-slide790"onclick="location.href='http://www.artister.com'"></div> <!-- Second slide. Link to: www.google.com --> <div class="art-slide-item art-slide791" onclick="location.href='http://www.google.com'"></div> <!-- Third slide. Link to: www.example.com --> <div class="art-slide-item art-slide792" onclick="location.href='http://www.example.com'"></div> <!-- Forth slide. Link to www.packtpub.com --> <div class="art-slide-item art-slide793" onclick="location.href='http://www.packtpub.com'"></div> </div> </div> - Save the file and view it in a browser. The slides now act as links. The solution works, but it would be useful to have the mouse pointer indicate that there is a link. We will achieve this with a little bit of CSS, setting the appearance of the mouse cursor. We need to add the following text to each slide definition:
style="cursor: pointer;"
- After modifications, we will have the following code:
<!—- The external container, containing the slideshow --> <div class="art-slider art-slidecontainer79"> <!—- Slideshow container --> <div class="art-slider-inner"> <!-- First slide. Link to: www.artisteer.com --> <div class="art-slide-item art-slide790" onclick="location.href='http://www.artisteer.com'" style="cursor: pointer;"></div> <!-- Second slide. Link to: www.google.com --> <div class="art-slide-item art-slide791" onclick="location.href='http://www.google.com'" style="cursor: pointer;"></div> <!-- Third slide. Link to: www.example.com --> <div class="art-slide-item art-slide792" onclick="location.href='http://www.example.com'" style="cursor: pointer;"></div> <!-- Forth slide. Link to www.packtpub.com --> <div class="art-slide-item art-slide793" onclick="location.href='http://www.packtpub.com'" style="cursor: pointer;"></div> </div> </div> - It's much better! The last thing we should do is add a hint to inform the visitor about which page he/she will be redirected to. To do this, we need to add a
titleparameter to each<div>representing a slide as follows:title="description of the link"
- Our final code looks as follows:
<!—- The external container, containing the slideshow --> <div class="art-slider art-slidecontainer79"> <!—- Slideshow container --> <div class="art-slider-inner"> <!-- First slide. Link to: www.artisteer.com --> <div class="art-slide-item art-slide790" onclick="location.href='http://www.artisteer.com'" style="cursor: pointer;" title="Artisteer official page"></div> <!-- Second slide. Link to: www.google.com--> <div class="art-slide-item art-slide791" onclick="location.href='http://www.google.com'" style="cursor: pointer;" title="Search engine"></div> <!-- Third slide. Link to: www.example.com --> <div class="art-slide-item art-slide792" onclick="location.href='http://www.example.com'" style="cursor: pointer;" title="Example domain"></div> <!-- Forth slide. Link to www.packtpub.com --> <div class="art-slide-item art-slide793" onclick="location.href='http://www.packtpub.com'" style="cursor: pointer;" title="Visit Packt Publishing"></div> </div> </div> - That's all. After the modifications, each link in our slideshow is a link to another webpage. The mouse cursor is the shape of a hand, which is typical for hyperlinks. Besides, there's a short description about where you will be redirected to.
Our slide with link description