cms page gallery link problem

[soczek]

Hi,

I have found very nice tile gallery and I managed to implement it into cms page.

All scripts are linked in cms.tpl, and they seem to work.

Now I have problem with links. I don't know where should all pictures be placed.

for example: in cms page there is a line:

<div data-category="Okulary"><a title="" href="images/lookbook/6.jpg" rel="lightbox[on]"><img src="images/lookbook/6.jpg" alt=""></a></div>

where in this configuration is prestashop looking for the file 6.jpg?

here is a link to gallery

 

 

Ok, so I've found a proper folder (img/cms), but still images called by javascripts don't load.

Edited June 19, 2013 by soczek (see edit history)

[vekia]

hello

 

i checked your website, image gallery works well!

 

take a look:

 

ps. fajne te okulary / very nice glasses

[soczek]

Thanks

There is still one issue.

Images called by the javascripts (loading.gif) sometimes load and sometimes don't. I'll leave it like it is now, maybe noone will notice

[JLeonrp]

Hi,

I have found very nice tile gallery and I managed to implement it into cms page.

All scripts are linked in cms.tpl, and they seem to work.

Now I have problem with links. I don't know where should all pictures be placed.

for example: in cms page there is a line:

<div data-category="Okulary"><a title="" href="images/lookbook/6.jpg" rel="lightbox[on]"><img src="images/lookbook/6.jpg" alt=""></a></div>

where in this configuration is prestashop looking for the file 6.jpg?

here is a link to gallery

 

 

Ok, so I've found a proper folder (img/cms), but still images called by javascripts don't load.

Hi soczek! I've checked your site and its an amazing work/design.

 

Right now I'm trying to put a photo gallery like yours, can you please throw me a line about it? How did you achieved it?

 

Thanks in advance!

[vekia]

it's a lightbox gallery, as far as i know you have to insert the lightbox library (jquery) and then use it in the urls to the pictures, exactly as in soczeks gallery:

 

<a title="" href="/img/cms/images/39.JPG" rel="lightbox[on]" style="width: 315px; height: 209.8125px;"><img src="/img/cms/images/39.JPG" alt="" style="width: 315px; height: 209.8125px; opacity: 1;"></a>

 

if i'm wrong, soczek please correct me

[soczek]

Hi!

Yes Vekia this is it.

I used some old scripts that I've found on my hard drive but any lightbox gallery will work pretty the same.

I can imagine that in most cases you have to link scripts of gallery and css files in cms.tpl and put there starting scripts. In my case it looks like this:

{if $request_uri|strstr:"7"}
<link rel="stylesheet" href="{$base_dir}gallerycss/rtg.css"/>
   <link rel="stylesheet" href="{$base_dir}gallerycss/lightbox.css"/>

<script type="text/javascript" src="{$base_dir}galleryjs/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="{$base_dir}galleryjs/rtg.min.js"></script>
<script type="text/javascript" src="{$base_dir}galleryjs/lightbox.min.js"></script>
<script>
       $(document).ready(function () {
           $('#myGallery').rtg({
               imageWidth:315,
               spacing:10,
               categories:true,
               lightbox:true,
               center: true
           });


       });
   </script>
   {/if}

this goes right after the disclaimer etc.

this line:

{if $request_uri|strstr:"7"}...{/if}

is not neccessary but it loads the scripts only in cms page with id=7, I added this because I didn't want the scripts to load on other cms pages, It seems just cleaner.

Next step is to put folders and files (scripts, css, images) via ftp.

You have to remember that presta is looking for pictures linked in cms page in img/cms directory. I've uploaded other folders (scripts, css) into main shop directory like you can see in source code above.

The last step is to put html code in cms page you have created for your gallery. In my case it looks like this:

 

<div id="myGallery" class="rtg-gallery" style="margin-top: 50px;">
<div class="rtg-images">
<div data-category="Okulary"><a title="" href="/img/cms/images/36.JPG" rel="lightbox[on]"><img src="/img/cms/images/36.JPG" alt="" /></a></div>
</div>
</div>

Structure of the html code may vary between different galleries.

[rybaczewa]

I know it's over a year, but I had same problem with images not loading and cound't solve it for a while. For anyone looking for the answer, you need to copy lightbox images from the download folder to your destination and then edit lightbox.css to match it.

My code:

body:after {
  content: url(../img/close.png) url(../img/cloading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

Script was looking for these images in some strange directories at first, so open your lightbox, inspect "X" icon and check the console. There will be 404 with dead link. Just move your images there and everything should be running fine.