Question to Marketing Shop
Hello,
I'm trying to establish a marketing shop and I have used your instruction: Link to Instruction
But it doesn't work to configure the picture field with the button to show next image.
What I'm doing wrong?
List Setting:
DispForm
Image1: Visible =true
Image2: Visible =false
Image3: Visible =false
Code:
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();
Result. 
I don't see the next image after clicking on this button.
Can you please help me?
Kind regards
Nicole
-
0
-
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 -
what do you mean with part of a group?
Can you give me an example?
Kind regards
Nicole
0 -
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 -
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 -
Hi Nicole,
it seems that there are mainly two challanges with the JavaScript code:
- 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
- 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 -
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 -
Did this solve your problem?
0 -
unfortunately not, because it needs to much customazation in the backgroud with adding an id to the html code.
Kind regards
Nicole
0 -
I understand, that his seems to be huge - but you could just try searching in the HTML-code (1) for "Next Image" (2) and then modify the button-element (3). Finally just close the dialog (4).
0 -
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 -
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 -
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 -
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 -
Nicole Geier: if you find my answers helpful, please mark my response(s) as helpful/correct.
0 -
Hello Henning Eiben
unfortunately your answers don't help.
I have exactly describe why they don't help.
Kind regards
Nicole
0 -
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.
Comments
17 comments