Forums

jQuery MaxImage scaling background

Permalink
Has anyone succesfully implemented this into a theme? I am having major problems wiht this and a client has specified this feature so that they can change the background as a new job comes in like this:
http://www.edenspiekermann.com/en/...

I have included it and had it working in the HTML version but once I converted it to a theme no use.

I am also trying to make it edtiable (I.E. the client could change it but I'm having the same issue).

If anyone has tried using this or has any help I would very much appreciate it as the site needs to go live within the next couple of weeks.

thanks in advance
Paul
craftyCS
 
JimboJetset replied on at Permalink Reply
JimboJetset
I read your post and tried it on the default concrete5 template and it displays fine...

Demo:http://www.ziweb.co.uk/trs/background-image/...

This plugin has quite a few features... I can try to write a custom block for you (I've done 3 other custom blocks) to get this working and make it editable for your users...

let me know....

Jim
craftyCS replied on at Permalink Reply
craftyCS
That's strange I can't get it to stop pushing the PAGE CONTENT BELOW IT'S LIKE IT ISN'T SEEING THE Z SORTING AND BECOMING IT'S OWN DIV EVEN THOUGH i AM PLACING THE IMAGE INTO THE TOP OF THE <PAGE> TAG... A BLOCK WOULD BE GREAT ESPECIALLY WITH THE AMOUNT OF USES IT HAS..

how did you implement the image and could it be that the maximage.js isn't being initiated because it is in with a bunch of other .js plugin calls?

cheers
Paul
JimboJetset replied on at Permalink Reply
JimboJetset
I placed this code between the head tags..

<script src="jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
 $('img.classTestName').maxImage({
  isBackground: true,
  verticalAlign: 'top'
 });
});
</script>


...then immediately below the opening body tag I put the img tag...

<img src="image.jpg" class="classTestName" />


I put all my files in the site root just for ease of testing the concept...

If your maxImage code will remain the same for all pages where it's to be used then I can make a block for the image declaration... if you want the maxImage settings to be adjustable through the page editor then it seems (at first glance) you'll need two blocks... one for the code in the head tags and one for the image.

let me know if I can be of any further help....
JimboJetset replied on at Permalink Reply
JimboJetset
OK... I've moved the img tag between the head tags and placed it immediately below the maxImage javascript and it works fine... so it will only need a single block.
JimboJetset replied on at Permalink Reply
JimboJetset
I now have a basic block that installs and when added to an edit area between the template head tags achieves this static background image effect.

Theres no options except choosing the picture from the library but the options can be added later...

http://www.ziweb.co.uk/trs/background-image/...

edit: The block can be placed anywhere on the page and it will work... :)
craftyCS replied on at Permalink Reply
craftyCS
Thanks Jimbo... it turns out it was the <?php Loader::element('header_required'); ?> was interfering with all my JS files as I had it in the wrong place... will now try and see if the original edit background worked as I fear that it may take a while for a block to appear.

thanks for your help much appreciated

;-P
JimboJetset replied on at Permalink Reply 1 Attachment
JimboJetset
...as it takes me to attach it to this message... lol

It's a basic block (not a package)

if you create an editable area between your template <head> tags after the Loader::element... then(once block installed) add this block to this area then those users with access to edit the page can change the background.