Fancybox On Content Pages

Hi, i’m trying to activate fancybox on content pages, but I can’t figure out how to do it.

In previous versions I was able to include the following line in the index.tpl file:

{include file=“common_templates/previewer.tpl” rel=“lightbox”}

But it seems the previewer.tpl file has changed and it no longer supports a custom rel, so it doesn’t respond to any images I post with rel=“lightbox”

See this topic for how it used to work:

Lightbox on all Images - Hints & Modifications - CS-Cart Forums

Can anybody help me out to get this to work?

I’m using version 4.2.4 at the moment.

Following this I’d like to suggest making this an option somewhere, something like “allow default previewer on content pages” and perhaps giving an option to choose the rel= content (or making it so you can select the previewer from the editor).


I've also tried to add fancybox directly (following Premium JavaScript UI Component Library).

But for some reason this doesn't work either.

The scripts get loaded (checked in loaded sourcecode), but the pictures don't respond to the rel=, they just open a new page.

So nobody has any idea?

Try the following code:


{include file=“common/previewer.tpl”}



image.jpg - path to the large image
image_small.jpg - path to the thumbnail

P.S. Not tested

Sorry, have been busy the last couple of weeks, so I had no time to look at your suggestion.

I just tried it, but it doesn't appear to work.

Just to be clear this is what I did (maybe I made a mistake somewhere):

  1. edit /design/themes/responsive/templates/index.tpl
  2. add the line “{include file=“common/previewer.tpl”}” after “{include file=“common/scripts.tpl”}”
  3. clear cache.
  4. edit the page where I want to use the fancybox and add (with the correct image files) through the tinymce source button/edit area:

    [color=#666600]<[/color][color=#000000]div [/color][color=#000088]class[/color][color=#666600]=[/color][color=#008800]“cm-preview-wrapper”[/color][color=#666600]>[/color]

    [color=#000000] [/color][color=#666600]<[/color][color=#000000]a id[/color][color=#666600]=[/color][color=#008800]“det_img_link_ID”[/color][color=#000000] data[/color][color=#666600]-[/color][color=#000000]ca[/color][color=#666600]-[/color][color=#000000]image[/color][color=#666600]-[/color][color=#000000]id[/color][color=#666600]=[/color][color=#008800]“preview[custom_images_ID]”[/color][color=#000000] [/color][color=#000088]class[/color][color=#666600]=[/color][color=#008800]“cm-image-previewer cm-previewer previewer”[/color][color=#000000] href[/color][color=#666600]=[/color][color=#008800]“/image.jpg”[/color][color=#666600]>[/color]

    [color=#000000] [/color][color=#666600]<[/color][color=#000000]img [/color][color=#000088]class[/color][color=#666600]=[/color][color=#008800]“pict”[/color][color=#000000] id[/color][color=#666600]=[/color][color=#008800]“det_img_ID”[/color][color=#000000] src[/color][color=#666600]=[/color][color=#008800]“image_small.jpg”[/color][color=#000000] width[/color][color=#666600]=[/color][color=#008800]“300”[/color][color=#000000] height[/color][color=#666600]=[/color][color=#008800]“203”[/color][color=#666600]>[/color]

    [color=#000000] [/color][color=#666600]<[/color][color=#008800]/a>

  5. save page.

    Just to be clear I allowed all elements through the following line in tinymce

    extended_valid_elements: “i[],span[],script[charset|defer|language|src|type],a[*]”,

    And made sure that everything got saved as posted, so it's not tinymce screwing me over.

    The strange thing is that I don't see any change to the source code of my page, where I would expect to see a script getting loaded after the default scripts.

I have performed the same steps and it works on my local installation (4.2.4). Please try to clear the cache at first

I did clear cache as shown at point 3.

But just to be sure I did it again with both ?cc and through Administration → Storage → Clear cache.

It still isn't working, am I using the right files?

The strange thing is I don't appear to see any changes I make to the .tpl file, I just tried to add “test” right after , but it doesn't show up in the page or source, even after clearing cache.

Could it be because I'm using the my_changes addon?

I just found something strange, when I edit the files through ftp the changes don't seem to get applied, but when I edit them directly through the website they are getting applied.

I'll explain each step below:

  1. I went to Design > File editor.
  2. I opened the file templates/index.tpl
  3. I edited the to: testing
  4. I looked to see if it worked and it did: it shows 'testing' as the tile in the tab of my browser, as expected.
  5. I went to my ftp and opened /design/themes/responsive/templates/index.tpl, it is the correct file as it shows testing
  6. I edited testing to testing2 and uploaded it.
  7. I cleared cache (both cc and through menu).
  8. I reloaded page and it still says 'testing' in the title instead of 'testing2'
  9. I again went to the file editor in the backend and opened the index.tpl file again and it clearly shows testing2

    So the file does get edited when I use ftp, but it just won't load the changes in the frontend, but it does show the changes in the file editor.

    Is there any way to explain this behavior?

Looks like a cache issue. To clear the cache please use:

That appears to do the trick.

As said I allready tried it with ?cc and [color=#282828][font=arial, verdana, tahoma, sans-serif]Administration → Storage → Clear cache, but both don't work (tried a couple of times again just to be sure), the only thing that appears to work is ?cc&ctpl.

Has this changed from previous versions? can you say what ctpl does?

Shouldn't the built in Clear Cache function also do the ctpl part?

And of course thanks for the solution!![/font][/color]

btw…where is the edit button on this forum :confused: :mrgreen:

*already (I always write allready)

I’m guessing ctpl stands for clear templates and I found you can set it to automatically update by changing the option “Rebuild cache automatically setting under Design → Template editor”

Apparently this also works for directly changed files through ftp.

So I guess I answered all of my own questions, but still, thanks for helping me.

And the fancybox is also working now btw.

You are right, the ctpl is used to clear templates cache.

Few words about clearing the cache.

?cc - clears cache of Registry, Lang Calues, Hooks etc.

?ctpl - clears compiled smarty templates

you can also use Design->Themes->Rebuild cache automatically option in admin area: [url=“”]Custom Domain by Bitly - which is very usefull for development

?ct - clears all thumbnails that were created automatically