johnnychaos supports this item


This author's response time can be up to 1 business day.

270 comments found.

Super! Thanks very much! The edit of the filterable.js file was what I missed. I already tried to add ’#category1’ to the html path (as described by you) but it didn’t work. Now I know why!

Thanks again!

Hi Johnny, firstly great template and good job done in building it. I wanted to know how I can hide the Thumbnails & the thumbnails icon?

Another issue I am running into is SEO optimisation as there is no headers on the fullscreen gallery (index page), so I was wondering if I can have a description overlay, whilst the images continue to slide in the background?


to hide thumbnails remove this part from the html page:
<!-- Thumbnails -->
<div id="gallery_hide" />
<div id="thumbnails_bg">
    <div id="mini_cont">
    <!-- Big navigation arrows -->
        <a class="prev" id="mini_prev" href="#"></a>
        <a class="next" id="mini_next" href="#"></a>
        <div id="thumbnails_cont">
            <div id="thumbnails">
                <!-- Thumbnails go here -->
                <a href="#"><img src="gallery/mini/1.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/2.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/3.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/4.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/5.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/6.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/7.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/8.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/9.jpg" alt="" /></a>
                <a href="#"><img src="gallery/mini/10.jpg" alt="" /></a>
            </div><!-- thumbnails div end -->
        </div><!-- thumbnails_cont div end -->
        <!-- footer -->
        <div id="bottom-line">

            <div id="author">© Jan Skwara</div>
        </div><!-- bottom-line div end -->

    </div><!-- mini_cont div end -->
</div><!-- thumbnails_bg div end -->

<div id="gallery-show" />
To add overlay div add to html something like this:
<div style="position:absolute; z-index:1000; bottom: 20%; right:20%; background:black; padding: 10px;"><h1>content here</h1></div>

Thank you

I have to ask a question again.

I’ve choosen a classic portfolio with 3 columns. When I click on the thumbnail image, the big size image appears with a transparent band ON the bottom part of the image where you can write image title or description. I want to have this description UNDER the image. The fancybox example No.6 shows how it should be. But I cannot find a way to move this text part under the image. I already changed “titlePosition” from ‘float’ to ‘outside’ in the jquery.fancybox-1.3.4.js and the jquery.fancybox-1.3.4.pack.js but it did not work :(

So, what do I have to do to change the location of the image description when the big size fancybox image opens?

Thanks in advance!

I found it out by myself :)

Problem solved!

how to play mp3 audio files

html version

Hi, template works with m4a and ogg files.

I’m not able to adjust the size of the background images properly. Independent from using a background image for the front page or for different gallery pages, it never fits to the screen properly. Even when I use a very small size image, it’s always “upscaled” to a bigger size as the screen itself.

I’ve changed the var slideSizeHome and var slideSizevalues but nothing changes. The var autoplayHome and var autoplay values are both set to “false” because I don’t want to show slideshows. I simply want to show different background images on different pages.

Look here for my test site: Click on “Galleries” “Recent / Awarded” and you will see that the background image shows up much too big :(:(

I’m sure you know how to adjust background images for different pages quickly :)

Thank you!

OK, I’ve done a bit of research on this topic and noticed that it seems to be much more complicated to realize a fix positioning in all browser types with different image and screen proportions.

I played a bit with the responsible variables in the big_gallery.js to see what different results are possible.

I don’t think you have to go deeper into this :)

Hi, it’s impossible to create image that exactly fit browser size (I understand that it’s what you want to achieve) – because of unlimited possible windows sizes. Script resizes image to fill whole window – so it means that one of the dimension can be cut. If you want to have all background image visible, then you will have black bar on top/bottom or left/right – like in “uncut” slider –

I understand. Thank you!

this theme is super.But video not working in safari and explorer.Can you please check the link

one query about the theme.Video not working in Safari.

Can you please check the link

Hi, I’t because you put mp4 file in ogg field:
 <source src="video/video.mp4" type='video/ogg' />
you should provide .mp4, .webm and .ogv files for full browser compatibility


In the full screen gallery which plays in the background, the images appear with small square kind of patterns. I want the images to appear plain.

Please let me know what I need to do to display plain images in the background slider.


Hi, open js/config.js file nad change line #15 from:
var imgpattern = true;
var imgpattern = false;

Hi Jonny

Thanks for updating the Twitter file. I downloaded the latest update and updated the config-twitter,php file.

What files should I be replacing on my server, just this config file?

Thanks again


Thanks Johnny!!!

And of course you have to copy the “tweetie” folder to js folder

yes I had done that already, was missing that script for the header section, Thanks again. U ROCK!


Please let me know how to put thumbnails of vertical images in the gallery. I tried to put at the size of 186*285, for 2 photo gallery, but the horizontal and vertical thumbnail images are not displayed properly.

Please let me know what are the settings or the size for putting vertical thumbnails.


How do we go next page in the gallery? is there a setting to set the number of thumbnails to be displayed in one page? So only horizontal thumbnails in one page and vertical in the other page will work?

Also the contact us form how can we add captcha code?

As it’s HTML/CSS template you decide how many thumbnails you want to have on a page. Also you can add html link to “second page”.

For chaptcha you can use one of many available solutions like:
Or create simple capcha for yourself (you willl have to write some PHP script)


I am not able to play the music. If I give the following values in the config.js file then the index page doesn’t load. It just turns blank -

var sound_m4a = “”; var sound_ogg = “”;

The url is right as if pasted in the browser directly the music plays fine.

if I set the variable as they were like before -

var sound_m4a = true; var sound_ogg = true;

The the site loads fine, but the music doesn’t play.

I have set the below values to true to play music on load - var soundplayHome = true; var soundplay = true;

Please help.

Also can i just have only one format .ogg and turn .m4a to false?


you need to have both files – m4a and ogg. You can easily convert files with free converters.


I converted to .m4a format also and uploaded. Now the code is as below -

var soundplayHome = true; var soundplay = true; var sound_m4a = “”; var sound_ogg = “”;

Still the index page is not loading.

In the start when values for var sound_m4a = true and var sound_ogg = true; was set the default music was playing fine.

The index page loads fine when these values are set to true or false but not to the url. Can you please tell me what is wrong?


you have some javascript errors on your site. You’re missing this line in head section:
<script type="text/javascript" src="js/TinyNav/tinynav.min.js"></script>
Please use some debug tool (for example firebug for FF and Chrome) to check those errors.

Hello. I have a question before buying this great template Where are displayed the comments in the blog form??


As ti’s only html template, to make comments/blog working you have to add some code, database etc – it’s just example, not working solutions. If you want to have everything working, you should check wordpress version of this template:

Hi. another one. Is possible to add widgets like goggle maps to contact form?


sure, just create the code on google page, and paste it in contact.html file. In WP version you can add map in theme options.

I installed the theme locally with MAMP and have a few problems (first time using Wordpress) 1. I’d like a full screen photo slider background 2. I’d like a full screen video background 3. I’d like a full screen video like on your page (Homevideo) 4. I’d like a photo gallery like on your page (Portfolio -> full and fill)

did you download it form themeforest? You should have “download” folder, and then inside “documentation” and “demo_content” folders

ok, I redownloaded the file and now I have everything. thank you

I have a problem! I have installed your demo content but the slide in homepage aren’t full width , are align on the right and finish where finish the logo. Do you why?

Please add a menu, it should help.

I have added an .mp4 link to the background of our homepage, but it is not appearing.

Full Site:
Here is the link I placed into the homepage: the Arts Inspire you MUST SEE VIDEO! - Voice by SAM AMADO.mp4

Am I supposed to place the link in differently?

Hi, site is not working (under construction). For cross browser compatibility you should provide also webm and ogv versions of the file. Please refer to template documentation.

Hi sir i like this Template … its amazing… i just want to buy this Template. but i want to know can i add vomio video in portfolio …is i

Hi. It’s html template, so you can paste the vimeo embed code and have video portfolio


I’ve just replaced the img/logo.jpg image with my own, but it still doesn’t work… any idea? thanks a lot,


...and just one more: I set the 2 colums gallery, but I did something wrong. There is a gap on the 7th position, no photo is shown there.

Hey, meanwhile I solved the first two and the last problems.

Hi, point 3 is not possible.
4) The easiest way is to use google fonts but there is no scriptina there. You can find something similar (Parisienne for example).
You can add scriptina font using @font-face method. Download Webfont Kit form . Tutorial here:

NEVER MIND, thanks!

Please tell me how to keep the menu open on all pages.

You can set it in js/config.js file.

Hello jhonny, I am stuck up at fullscreen gallery of home page.I am facing a strange bug. I am loading the images dynamically and the path given to it is correct, but it still displays wierldy only untill i add these <img src="/img/blank.png" data-original="/gallery/full/2.jpg" width="1600" height="1063" alt="" />

As soon as i add these line of code the gallery starts working properly,but as soon as i remove this it stops working. Here is the URL : Kindly help ASAP as the site is live and need to fix this up soon.

PS : i have also developed the same site on local enviorment and it is working fine there.

HI, slider seems to work fine. Did you still have any problems?

Yah i got it solved..Thanks for the reply :)