1

I want to insert an image in following code

jQuery(document).ready(function() {

jQuery("#owl-test-feature").owlCarousel({

navigation : true, 

slideSpeed : 400,
paginationSpeed : 400,

items : 5, 
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : true,
  navigation: true,
  navigationText: ["here prev.png","here next.png"]

});

});

I can't give media link inside the jquery. can anyone help me?

1

you can call media link variable in the jquery script , like this

<?php
$image= 'image path';

<script type="text/javascript">
var simple = '<?php echo $simple; ?>';
 </script>

jQuery(document).ready(function() {

jQuery("#owl-test-feature").owlCarousel({

navigation : true, 

slideSpeed : 400,
paginationSpeed : 400,

items : 5, 
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : true,
  navigation: true,
  navigationText: ['<?php echo $image; ?>','<?php echo $image; ?>']

});

});
| improve this answer | |
0
jQuery(document).ready(function() {
    var mediaPath = "<?php echo Mage::getBaseUrl('media').'YOUR/MEDIA/DIRECTORY/PATH' ?>";
    jQuery("#owl-test-feature").owlCarousel({

    navigation : true, 

    slideSpeed : 400,
    paginationSpeed : 400,

    items : 5, 
    itemsDesktop : false,
    itemsDesktopSmall : false,
    itemsTablet: false,
    itemsMobile : true,
      navigation: true,
      navigationText: [mediaPath+"here prev.png",mediaPath+"here next.png"]

    });

});
| improve this answer | |
0

I would not move the entire JavaScript to one of the phtml files. First, I'd create a variable in your phtml file or in the head or just before your body closing tag, which is then available in all your JavaScript files. There are two options on where you can place the images: the media folder or your skin folder. Based on that, you need on of the following variables:

var MEDIA_URL = '<?php echo Mage::getBaseUrl('media'); ?>';
var SKIN_URL = '<?php echo Mage::getDesign()->getSkinUrl(); ?>';

For the skin URL, you might have to add some more parameters, like the area (frontend) and your current theme. You might want to check this when implementing the code.

Next, I'd create a JavaScript file for your owlCarousel:

jQuery(document).ready(function() {
    var prevImage = MEDIA_URL + 'slider/prev.png',
        nextImage = MEDIA_URL + 'slider/next.png';
    // Replace MEDIA_URL with SKIN_URL when using that location for the files.

    jQuery("#owl-test-feature").owlCarousel({
        navigation : true, 
        slideSpeed : 400,
        paginationSpeed : 400,
        items : 5, 
        itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : true,
        navigation: true,
        navigationText: [prevImage, nextImage]
    });
});
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.