I use this module. http://picturecut.tuyoshi.com.br/

The problem is to set the default image (DefaultImageButton), namely, I have several pictures on the page and when I connect the module to each container in turn - it takes the first value of the DefaultImageButton

$(document).ready(function(){ $("#container_photo<?php echo $i; ?>").PictureCut({ Extensions : ["jpg","png","gif"], InputOfImageDirectory : "image", DefaultImageButton : "<?php echo $option_value['option_value'];?>", PluginFolderOnServer : "/assest/jquery.picture.cut/", FolderOnServer : "/upload/", MinimumWidthToResize : 1024, MinimumHeightToResize : 630, EnableCrop : true, CropWindowStyle : "Bootstrap" }); })

And accordingly for container_photo1, 2, 3, etc. DefaultImageButton from container_photo1 is applied.

How to solve ..? =)

 <div id="container_photo1"></div> <script> $(document).ready(function(){ $("#container_photo1").PictureCut({ Extensions : ["jpg","png","gif"], InputOfImageDirectory : "image", DefaultImageButton : "/upload/a4fed4621258.jpg", PluginFolderOnServer : "/assest/jquery.picture.cut/", FolderOnServer : "/upload/", MinimumWidthToResize : 1024, MinimumHeightToResize : 630, EnableCrop : true, CropWindowStyle : "Bootstrap" }); }) </script> <div id="container_photo2"></div> <script> $(document).ready(function(){ $("#container_photo2").PictureCut({ Extensions : ["jpg","png","gif"], InputOfImageDirectory : "image", DefaultImageButton : "/upload/aa6d7f8c4f4b.jpg", PluginFolderOnServer : "/assest/jquery.picture.cut/", FolderOnServer : "/upload/", MinimumWidthToResize : 1024, MinimumHeightToResize : 630, EnableCrop : true, CropWindowStyle : "Bootstrap" }); }) </script> <div id="container_photo3"></div> <script> $(document).ready(function(){ $("#container_photo3").PictureCut({ Extensions : ["jpg","png","gif"], InputOfImageDirectory : "image", DefaultImageButton : "/upload/217e25f0738ae.jpg", PluginFolderOnServer : "/assest/jquery.picture.cut/", FolderOnServer : "/upload/", MinimumWidthToResize : 1024, MinimumHeightToResize : 630, EnableCrop : true, CropWindowStyle : "Bootstrap" }); }) </script> <div id="container_photo4"></div> <script> $(document).ready(function(){ $("#container_photo4").PictureCut({ Extensions : ["jpg","png","gif"], InputOfImageDirectory : "image", DefaultImageButton : "/upload/cef4398d03ab.jpg", PluginFolderOnServer : "/assest/jquery.picture.cut/", FolderOnServer : "/upload/", MinimumWidthToResize : 1024, MinimumHeightToResize : 630, EnableCrop : true, CropWindowStyle : "Bootstrap" }); }) </script>
  • How do you set the default value? - Jean-Claude
  • DefaultImageButton: "<? Php echo $ option_value ['option_value'];?>", - Shevtsov Eugene
  • so set different $ option_value ['option_value'] - Jean-Claude
  • Well, so I ask every time new ones, in the code, too, they are different everywhere, but always enough from the very first. - Shevtsov Eugene
  • give an example code. - Jean-Claude

1 answer 1

In general, you will have to finish the core of the script, because it sticks the background by adding <style> ...background... </style> to the <head> html document. https://github.com/tuyoshivinicius/jQuery-Picture-Cut/blob/master/src/jquery.picture.cut.js line 273

$('<style type="text/css" id="' + basic_dependence_css_id + '">' + ".picture-element-principal{background:url(" + Options.DefaultImageButton + ") no-repeat 50% 50%}" + ".picture-dropped{border:2px #666 dashed!important;}" + '</style>').appendTo('head')

where Options.DefaultImageButton is your picture, and they are different in the object, you just insert console.log(Options.DefaultImageButton); after this line console.log(Options.DefaultImageButton); .

Doping the script is to apply the background to your elements by, for example, inserting the string $($(this).selector).css('background', 'url(' + Options.DefaultImageButton + ') no-repeat 50% 50%'); after the 273rd or even the 274th.

An example of working code: I didn’t get here, I wrote http://jsbin.com/vevajujugo/edit?html,output