Skip to main content

Search

Question to Marketing Shop

Comments

17 comments

  • Nicole Geier

    Hi Christof Nussbaumer,

     

    can you maybe help me in this issue?

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Hi Nicole,

     

    are your three image-controls on your form part of a group? Because as far as I can tell the JavaScript assumes that the controls are within a group. Maybe you can check that - and if they're not, maybe you can try placing them in a group (along with the button).

     

    Cheers,

    Henning

    0
  • Nicole Geier

    Hi Henning Eiben

     

    what do you mean with part of a group?

    Can you give me an example?

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Well, in the Rich-Forms tab you can insert a group (either vertial or horizontal), which in turn can have child-controls.

     

    The above JavaScript assumes, that images and button are within a group.

     

    Once you have created a group and moved/added controls to the group you can verify the structure of your form using the "select-element" menu-entry. This will show you any groupings/nestings.

     

    Cheers,

    Henning

    0
  • Nicole Geier

    Hi Henning Eiben

     

    i have put all images in a group and also the button

    I have insert the script into the button

    var buttonContainer = jQuery('#nextImage').closest('.ard-group');
    var container = buttonContainer.closest('.ard-group-body');
    var images = container.children('.ard-group');
    for(var i=0; i<images.length; i++){
    jQuery(images[i]).hide();
    }
    images = jQuery.map(images, function(element){
    return jQuery(element).find('img').length ? element : null;
    });
    if( typeof window[".imageId"] == 'undefined'){
    window[".imageId"] = 1;
    } else {
    window[".imageId"]++;
    }
    var imageToShow = images[window[".imageId"] % images.length];
    jQuery(imageToShow).show();
    buttonContainer.show();

     

    It still doesn't work, what is going wrong?

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Hi Nicole,

     

    it seems that there are mainly two challanges with the JavaScript code:

    1. the DOM-structure of the generated HTML seems to have changed. At the time of the tutorial the button was within a div-element with a class of "ard-group". This seems no longer the case, so you have to remove the ".closest('.ard-group')" from the first line
    2. the script assumes that the button has an unique id of "nextImage" in order to find the button and the containing group. This seems to be missing in the tutorial, but you have to add this id to the button. You can do that by editing the content-source of the page, search for the html-element "button" and add "id="nextImage" to the button-element.

    Cheers,

    Henning

    0
  • Nicole Geier

    Hi Henning Eiben,

     

    thank you for your answer.

    It would be good, if the tutorial will be updated.

    The workaround you mentioned is hard to maintain. Ther should be a much more easier solution to use the Web Shop solution in the tutorial.

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Did this solve your problem?

    0
  • Nicole Geier

    Hi Henning Eiben

     

    unfortunately  not, because it needs to much customazation in the backgroud with adding an id to the html code.

     

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    I understand, that his seems to be huge - but you could just try searching in the HTML-code (1) for "Next&#160;Image" (2) and then modify the button-element (3). Finally just close the dialog (4).

     

    0
  • Nicole Geier

    Hi Henning Eiben

     

    I have tested it. It works only if I rearrange the position of the images.

    First you can see the field title and image1. With click on the button, Field title disappear and only image 1 stays.

    Next click all field besides toolbar disappear. Next click image 2 appear, title, image1 and toolbar disappear.

    Also the button has to be positioned in a group.  

     

    I have tried to arrange it like described in the tutorial but this also doesn't work.

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Hi,

     

    You have to arrange this slightly different:

     

    The images and the button need to be in one group, the title and other fields should not be in the same group as the script would hide those elements as well.

    0
  • Nicole Geier

    Hi Henning Eiben

     

    the only thing what appear and this appear with your proposed arrangement is the toolbar and the title.

    Also the Arrangement is not usuable, because the toolbar should be on the bottom, not in the middle.

     

    Kind regards

    Nicole

    0
  • Henning Eiben

    Well - that was just an example to show what "elements" are in the group and what elements are not. Of course you can move the elements around as you like, you can even create more groups, add fields etc. You just have to make sure that all the images and the button are in the same group. You can even add more images in case you have more than 3 - or remove images ...

    0
  • Henning Eiben

    Nicole Geier: if you find my answers helpful, please mark my response(s) as helpful/correct.

    0
  • Nicole Geier

    Hello Henning Eiben

     

    unfortunately your answers don't help.

    I have exactly describe why they don't help.

     

    Kind regards

    Nicole 

    0
  • Matthias Walter

    Hi Nicole Geier

    the provided "Next Image" Button script needs a defined structure to work and find the correct picture elements.

    I suggest the following structure and button script which is working:

    var buttonContainer = jQuery('#nextImage').closest('.ard-group-body');
    var images = buttonContainer.children('.ard-group');
    for(var i=0; i<images.length; i++){
      jQuery(images[i]).hide();
    }
    images = jQuery.map(images, function(element){
        return jQuery(element).find('img').length ? element : null;
    });
    if( typeof window["imageId"] == 'undefined'){
      window["imageId"] = 1;
    } else {
      window["imageId"]++;
    }
    var imageToShow = images[window["imageId"] % images.length];
    jQuery(imageToShow).show();
    buttonContainer.show();

    I hope this helps.

    Thanks a lot Henning Eiben for all you answers and explanations.  

     

    BR Matthias

    0

Please sign in to leave a comment.