We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Resize backgroun image to browser.. and how to use javascript's path in modx[SOL

    • 35064
    • 13 Posts
    inclub Reply #1, 15 years, 5 months ago
    Hello
    I want to resize background image to browser window’s size. And I wold like to use for that purpose bgstretcher jQuery plugin.

    I’ve got problem with path. What I need to write inside of quotes of script?? instead of ’images/backgroundimage.jpg’ 
    <script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/backgroundimage.jpg'], imageWidth: 1280, imageHeight: 768, slideShow: false
});
});
</script>


      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 15 years, 5 months ago
      The path to the image goes there; it will be relative to the index.php file that is the origin of every page generated by MODx.

      For example, I use Evo, so most of my template images (backgrounds and such) are in assets/templates/template-name/images. However, you can put images anywhere you like; if you are unsure about the path thing just make a folder in your web root name images to put the image in, and the path will be as you’ve posted.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 35064
        • 13 Posts
        inclub Reply #3, 15 years, 5 months ago
        Still don’t work.
        When i’m using some simple JS scripts. It is working.
        But with that plugin no.
        Trying to solve...
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 15 years, 5 months ago
          Are you sure you have the <BODY class="bgStretcher"> tag in your template’s HTML? If you’re using XHTML it should be in lower case, both the <body ...> tag and the Javascript function. You also have to load the required javascript library somewhere before that code you’ve posted (with paths edited to correctly reflect the actual location of the javascript and css files).
          <script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

          http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 35064
            • 13 Posts
            inclub Reply #5, 15 years, 5 months ago
            Quote from: sottwell at May 14, 2011, 11:48 PM

            Are you sure you have the <BODY class="bgStretcher"> tag in your template’s HTML? If you’re using XHTML it should be in lower case, both the <body ...> tag and the Javascript function. You also have to load the required javascript library somewhere before that code you’ve posted (with paths edited to correctly reflect the actual location of the javascript and css files).
            <script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

            http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html



            Thank you for reply. I’m newbie in MODx.
            The problem is solved. It was my fault.
            In head tag jquery library was under plugin. But it must be on top !!!!!!
            I spent so many time to fix it. Disappointed... Till last moment I suggested that something wrong with path in javascript, that modx change it ...
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              sottwell Reply #6, 15 years, 5 months ago
              Then would you please add [SOLVED] to the subject of this thread?
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org