Forums

Jquery image slider conflict - edit/add button not working

Permalink
Hello, I'm trying to bring my theme into concrete5. I have a jquery image slider which causes the edit and add buttons in the edit bar to not function. I have traced the issue to a script file for the slider custom.js.


This is how i load the scripts. if i load "<?php Loader::element('header_required'); ?>" 
<?php  Loader::element('header_required'); ?>
      <script src="<?=$this->getThemePath()?>/js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
   <script type="text/javascript" src="<?=$this->getThemePath()?>/js/jquery.aviaSlider.js"></script>
   <script type="text/javascript" src="<?=$this->getThemePath()?>/js/custom.js"></script>


this is the code from custom.js that causes the issue:

$(document).ready(function(){
//activate the lightbox
jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});
// depending on the id of the slider a different setup gets activated
$('#diagonal-blocks').aviaSlider({   blockSize: {height: 60, width:60},
transition: 'slide',
display: 'diagonaltop',
switchMovement: false
});
});



if i delete custom.js the bar functions properly but the image slider wont work without it. I apologize in advanced if this has been covered, i've tried different ideas from the forum already with no luck and my php knowledge is limited.


thanks for your help,
Mike
 
designsbygucci replied on at Permalink Reply
There is a demo of the theme at:
http://www.graphicloft.ca/

when i use chrome an error comes up:

jquery.aviaSlider.js:166Uncaught TypeError: Cannot call method 'split' of undefined
Steevb replied on at Permalink Reply
Steevb
Hi,
Not sure if this will help, but I have a site that will NOT work with jQuery 1.6.2.

I fiddled and gave up, called 1.5.1 and all was well.

You have to careful with Javascript conflicts sometimes and maybe more so with Concrete?

BTW: Have tried putting your javascript at the bottom of your page?

Sorry couldn't help more.
designsbygucci replied on at Permalink Reply
unfortunately it didn't help. i've tried loading the 1.5.1 of jquery however it just gives me a new error when i click the edit button. so im assuming concrete needs 1.6 to operate.

I'm starting to think the best solution would be to buy a slider off the marketplace and hardcode it into my theme. But I really like the transition effect in the one im using (avia slider - diagonal block transition)

thanks though, any help is appreciated!
Steevb replied on at Permalink Reply
Steevb
Hi,

Sorry about that.

The slider I am using is WOWSlider and NOT in an iframe.

BTW: Partly FREE!!

Take a look.

Regards

Steev
designsbygucci replied on at Permalink Reply
i actually just tried nivo slider, which is free (not the block on the maketplace). and works perfectly! im little disappointed the first one didn't work. something defiantly conflicting in the code.

Now i guess i need to see if i can get the transitions the way i want.
zoinks replied on at Permalink Reply
Nivo Slider does work, but the javascript breaks the Edit bar in Edit Mode.

I tried this "if isEditMode() trick, but it didn't work...
<?php if ($c->isEditMode()) { 
    //if its in editmode, do nothing ?>
<?php } else {
    //if its not in editmode ?>
    <script type="text/javascript" src="<?=$this->getThemePath()?>/scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="<?=$this->getThemePath()?>/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<?php } ?>


EDIT: ...uh, I just deleted the jquery-1.6.1.min.js line and it works. It seems strange that it would conflict since it is not supposed to load if C5 is in Edit Mode, but I guess Nivo Slider still works with whatever version of jQuery C5 runs on, so I guess it doesn't matter.
cainKuri replied on at Permalink Reply
cainKuri
Happend the same with me... with backstretch and proslider, and happend before the same problem... and you give me the idea... i solve it puting a different order of the jquery...

me what i did i put my jquery before the <body> tag start... and solve it...