Forums

Designer Block Content - Parallax image

Permalink
Hi,

I'm building a block to select and show an image full width with parallax effect on it.
The block works when i'm log as admin to the website but as soon as i'm unlog the block didnt show images.
The point is that the path is correct to the image.

Here my view.php
<?php  defined('C5_EXECUTE') or die("Access Denied.");
?>
<style>
.parallax-window {
    min-height: 400px;
    background: transparent;
}
</style>
<?php  if (!empty($field_1_image)): ?>
       <div class="parallax-window" data-parallax="scroll"  data-over-Scroll-Fix="true" data-image-src="<?php  echo $field_1_image->src; ?>"></div>    
<?php  endif; ?>


And in the Header.php i did call this javascript:

<script src="<?= $this->getThemePath() ?>/js/parallax.min.js"></script>


I just wonder why it works when i'm log in to the website ???

Thanks in advance

Chris
chrismodlao
 
hutman replied on at Permalink Reply
hutman
Can you provide a link to your site? It could be that you need to require another javascript file (jquery?) when you're not logged in, that is by default included when you are logged in.
chrismodlao replied on at Permalink Reply
chrismodlao
Hi,

So discover that the block works but the error is from this part of my code.
When in editing mode i disable load of Responsive state like this.
I use this snipet in my header.php

<?php    
    $u = new User();
   if($u->isLoggedIn()) {
         //search box
   } else {
      echo('<script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/skel.min.js"></script>
      <script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/skel-layers.min.js"></script>
        <script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/init.js"></script>');
   }
?>


If i introduce my javascript for the paralax effect in this it works but i have to not close the script call. Like this :
<?php    
    $u = new User();
   if($u->isLoggedIn()) {
         //search box
   } else {
      echo('<script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/skel.min.js"></script>
      <script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/skel-layers.min.js"></script>
      <script>
               jQuery(".parallax-window").parallax({
      bleed:100
      });
        <script src="http://www.buraphawood.com/c5-web/themes/BuraphaAgroforestery/js/init.js"></script>');
   }
?>


So i guess there is something wrong there because as soon as i close my parallax.window call with </script>, the effect didnt work anymore.
But i check and i can see the error. Which should be tiny small i guess!!! ;(((
chrismodlao replied on at Permalink Reply
chrismodlao
web is this one at the bottom of the page :
hutman replied on at Permalink Reply
hutman
On your site you currently have

<script>
               jQuery(".parallax-window").parallax({
      bleed:100
      });<script>

But you need to have 

<script>
jQuery(".parallax-window").parallax({
      bleed:100
});
</script>

Which ends, the script call, otherwise you have two opening tags and that is throwing errors.
chrismodlao replied on at Permalink Reply
chrismodlao
Yes i notice it but it still the same.
In fact i discover there was a conflict with this file : init.js and the parallax call.

Any idea how i can maybe rewritte function to make both works ?