I am using new version of Pro Photo to build my website. I have the latest version of Layer Slider. Been having as much fun playing and building with this plugin as i did playing in my sandbox when I was a kid!
I have spent hours looking through your help files but have yet to see a clear detailed step by step instructions of the html needed to link a graphic in a text block to a slider. I know I could build a button but it is inserted as a widget and Pro Photo will not allow widgets to be placed side by side in the same column. If I place short code side by side Pro Photo also stacks them. I could make several columns and place a widget in each but spacing between the widgets becomes and issue and on phone displays it becomes very weird. I see references to links from one slide layer to another or to other URL's but not to my situation. I do need clear examples!! At 75 I am good but not as good as I was when I bought my first Apple II in the late 1970's:) Thanks. Richard
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
If I understood it correctly, you want to place two sliders next to each other, but they get placed on top of each other. For this you can use the page builder, create two columns and insert the two sliders separately. One into each column. Currently you just added the same shortcode twice, that is why it's not working.
As mentioned in my first message, I realize I can do this by making 2 columns. But I would like at least 4 in a row which means "all I need to do is make 4 columns", however this works on a full size format but at the cell phone format it requires the phone format accepts 4 columns for the gallery on the page and this just makes the gallery images too small.
So why all the apparent secrecy about an html code for a link to a slider that can be placed in a text area? I have other applications of placing a tiny graphic in text and on hover it would create a fun popup.
When furnishing the magic code please be specific. I await your advice.
Regarding the desktop/mobile layout. It is related to your page builder. LayerSlider provides you with a responsive slider that fills the available space where it is inserted. But the layout of your page is handled by the page builder, not LayerSlider. So it's up to the page builder to achieve the layout you need.
Unfortunately the popup part is not clear either. LayerSlider does have a popup feature that you can utilize to create a popup slider. You can even trigger it with an external button from your site. To do that you will need to apply an ID (id="example") or class (class="example") on that button and enter the same selector for ID (#example) or class (.example) to the Open By Click field in the Slider Settings. There is also more information about popups here: https://support.kreaturamedia.com/docs/layersliderwp/documentation.html#publishing-popups
Attila, Sometimes I believe us "code challenged" personna must give you headaches, for this I am sorry.
I have read the info in the links you last supplied and unfortunately I just can not get it:(
I am a visual person, a show me learner, a picture is worth a thousand words kid of guy. So maybe we can try a more visual approach. I want to create a popup slider that displays on one of my website pages. The image initially appearing will be this little cartoon figure. When one hovers over the character the popup will appear or if there is a hover effect to indicate the character is clickable then that would be great.
Therefore #1 I load the cartoon character in as the first layer. (Is loading a copy into the upper left corner only for having a visual reference or is it a much need action for the slider to function?)
#2 I set as a popup slider. If it is to be clickable what goes on the yellow highlighted line. If clickable, how does one add a hover effect ( built in function, under hover effect transition for that individual slide, other?)
#3 For this first slide I am now in the popup menu. I have seen examples in your FAQ but remain confused of where there are placed and then how this id reflected in the code that calls this into action. In the upper left, I notice as on adds a new layer it is added to the top of the stack. In what order do the layers play, top to bottom in the stack, by numerical order? If I create my cartoon first and add more layers it remains at the bottom of the stack. Do I need to rearrange each layer so the sequence is correct?
#4 I use Pro Photo Premium for building my site.
#5 A layer short code in the text widget. I have seen in your FAQ's these variations of code and a suggestion this code be placed before the layer short code in the text widget.
Here is an example with using jQuery. You need to modify the ”#yourbutton” selector to your element which will trigger the slide change. You also need to modify the ”#layerslider_1” selector to the ID of your slider.
This code should be fine if you’re using the correct selector (#layerslider_1). Also, you might need to use the jQuery keyword instead of the dollar sign, since WP uses jQuery’s noConflict mode by default. So the code should be:
……. It’s possible that you need to use the jQuery keyword instead of the dollar sign. Also, make sure you’re using the right selector and the element with the ID slider exists. Here is the revised code:
THIS IS THE THE KEY TO SOLVING MY PROBLEM... what code to use, how do I create the code, where is it placed? Let say my popup slide I will name "Cartoon Banana" or for should it be cartoon-banana? Can you show me a screenshot of where and what is entered on the forms for Slider and Slides. I have looked through your samples of popups and nowhere have I been able to find an example for such action. If there is one please direct me to it too.
Finally, thank you for your patience and understanding. Richard
Yes, it did. But somehow it did not update the ticket for us, so we did not notice it until your second message.
We understand that it's easier visually, but unfortunately we cannot possibly know every theme and every plugin, so we cannot cover every possibility and give you screenshots of them, as basically every site is using a custom set of themes and plugins.
#1 The cartoon figure does not have to be inside the slider if that's the problem. The popup function is working individually, so you can open it from an external element outside of the slider, be that an image in a page builder or even in Pro Photo. Just insert the image and apply an ID or class attribute on it that you can use in the Open By Click field of the popup slider.
#2 You can't open a popup with hover, only with clicking. You will need to add it to the highlighted yellow field, for example #popup1 for ID and .popup1 for class. Notice the # and . chars. You cannot set hover transition for slides, only for layers, but there is a global hover option in the Slide Options that triggers all layers' hover at once.
#3 Layers are stacking. The one on the top of the layers list will above the others and so on, you can change this by rearranging the order. The popup slider has to be a completely different slider. You do not have to worry about codes, just insert the cartoon as an image, it does not even have to be a slider as mentioned, or if you want it to be a slider then follow the steps in #1.
#4 We are not familiar with this product, regardless the procedure is the same, only the interface is different. This is not really related to LayerSlider, it's a common web thing.
#5 What this code does is that it navigates to the next slide when the specified element is clicked (it does not have to be related to LayerSlider). This requires custom coding and web development experience, but you do not need this. If it's inside a slider you can simply use the linking field of a layer and select "Switch to the next slide" value, so there is no coding. The second code snippet is for jumping to a certain slide. This can also be achieved in the plugin without any coding.
As we can see the problem is that you want to make everything in one slider. But the popup slider has to be a different one. There is the original slider and the popup that will be opened, separate ones. However the trigger does not necessarily has to be inside a slider as mentioned. But if you still want to add both of them as a slider, we attached some screenshots for you. This example shows two separete sliders, and the popup opens by clicking on the bag in the other slider.
Greetings,
I am using new version of Pro Photo to build my website. I have the latest version of Layer Slider. Been having as much fun playing and building with this plugin as i did playing in my sandbox when I was a kid!
I have spent hours looking through your help files but have yet to see a clear detailed step by step instructions of the html needed to link a graphic in a text block to a slider. I know I could build a button but it is inserted as a widget and Pro Photo will not allow widgets to be placed side by side in the same column. If I place short code side by side Pro Photo also stacks them. I could make several columns and place a widget in each but spacing between the widgets becomes and issue and on phone displays it becomes very weird. I see references to links from one slide layer to another or to other URL's but not to my situation. I do need clear examples!! At 75 I am good but not as good as I was when I bought my first Apple II in the late 1970's:) Thanks. Richard
Hello Richard Neuman,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
If I understood it correctly, you want to place two sliders next to each other, but they get placed on top of each other. For this you can use the page builder, create two columns and insert the two sliders separately. One into each column. Currently you just added the same shortcode twice, that is why it's not working.
Thanks for your reply.
As mentioned in my first message, I realize I can do this by making 2 columns. But I would like at least 4 in a row which means "all I need to do is make 4 columns", however this works on a full size format but at the cell phone format it requires the phone format accepts 4 columns for the gallery on the page and this just makes the gallery images too small.
So why all the apparent secrecy about an html code for a link to a slider that can be placed in a text area? I have other applications of placing a tiny graphic in text and on hover it would create a fun popup.
When furnishing the magic code please be specific. I await your advice.
Richard
There is no secrecy. It's just not completely clear what are you requesting or trying to achieve. The available inserting methods (and their codes) of LayerSlider are all listed and described in the documentation on the following URL: https://support.kreaturamedia.com/docs/layersliderwp/documentation.html#publishing-sliders
Regarding the desktop/mobile layout. It is related to your page builder. LayerSlider provides you with a responsive slider that fills the available space where it is inserted. But the layout of your page is handled by the page builder, not LayerSlider. So it's up to the page builder to achieve the layout you need.
Unfortunately the popup part is not clear either. LayerSlider does have a popup feature that you can utilize to create a popup slider. You can even trigger it with an external button from your site. To do that you will need to apply an ID (id="example") or class (class="example") on that button and enter the same selector for ID (#example) or class (.example) to the Open By Click field in the Slider Settings.
There is also more information about popups here: https://support.kreaturamedia.com/docs/layersliderwp/documentation.html#publishing-popups
Attila, Sometimes I believe us "code challenged" personna must give you headaches, for this I am sorry.
I have read the info in the links you last supplied and unfortunately I just can not get it:(
I am a visual person, a show me learner, a picture is worth a thousand words kid of guy. So maybe we can try a more visual approach. I want to create a popup slider that displays on one of my website pages. The image initially appearing will be this little cartoon figure. When one hovers over the character the popup will appear or if there is a hover effect to indicate the character is clickable then that would be great.
Therefore #1 I load the cartoon character in as the first layer. (Is loading a copy into the upper left corner only for having a visual reference or is it a much need action for the slider to function?)
#2 I set as a popup slider. If it is to be clickable what goes on the yellow highlighted line. If clickable, how does one add a hover effect ( built in function, under hover effect transition for that individual slide, other?)
#3 For this first slide I am now in the popup menu. I have seen examples in your FAQ but remain confused of where there are placed and then how this id reflected in the code that calls this into action. In the upper left, I notice as on adds a new layer it is added to the top of the stack. In what order do the layers play, top to bottom in the stack, by numerical order? If I create my cartoon first and add more layers it remains at the bottom of the stack. Do I need to rearrange each layer so the sequence is correct?
#4 I use Pro Photo Premium for building my site.
#5 A layer short code in the text widget. I have seen in your FAQ's these variations of code and a suggestion this code be placed before the layer short code in the text widget.
Here is an example with using jQuery. You need to modify the ”#yourbutton” selector to your element which will trigger the slide change. You also need to modify the ”#layerslider_1” selector to the ID of your slider.
jQuery('#yourbutton').click(function(e) {
e.preventDefault();
jQuery('#layerslider_1').layerSlider('next'); });
This code should be fine if you’re using the correct selector (#layerslider_1). Also, you might need to use the jQuery keyword instead of the dollar sign, since WP uses jQuery’s noConflict mode by default. So the code should be:
<a href="javascript:void(0);" onclick="jQuery('#layerslider').layerSlider(2);">Text & Icon</a>
…….
It’s possible that you need to use the jQuery keyword instead of the dollar sign. Also, make sure you’re using the right selector and the element with the ID slider exists. Here is the revised code:
<a href="javascript:void(0);" onclick="jQuery('#slider').layerSlider(2);">second slide</a>
THIS IS THE THE KEY TO SOLVING MY PROBLEM... what code to use, how do I create the code, where is it placed? Let say my popup slide I will name "Cartoon Banana" or for should it be cartoon-banana? Can you show me a screenshot of where and what is entered on the forms for Slider and Slides. I have looked through your samples of popups and nowhere have I been able to find an example for such action. If there is one please direct me to it too.
Finally, thank you for your patience and understanding. Richard
Just curious as to whether my reply sent 2 days ago has been received. I received no email that it had.
Yes, it did. But somehow it did not update the ticket for us, so we did not notice it until your second message.
We understand that it's easier visually, but unfortunately we cannot possibly know every theme and every plugin, so we cannot cover every possibility and give you screenshots of them, as basically every site is using a custom set of themes and plugins.
#1 The cartoon figure does not have to be inside the slider if that's the problem. The popup function is working individually, so you can open it from an external element outside of the slider, be that an image in a page builder or even in Pro Photo. Just insert the image and apply an ID or class attribute on it that you can use in the Open By Click field of the popup slider.
#2 You can't open a popup with hover, only with clicking. You will need to add it to the highlighted yellow field, for example #popup1 for ID and .popup1 for class. Notice the # and . chars. You cannot set hover transition for slides, only for layers, but there is a global hover option in the Slide Options that triggers all layers' hover at once.
#3 Layers are stacking. The one on the top of the layers list will above the others and so on, you can change this by rearranging the order. The popup slider has to be a completely different slider. You do not have to worry about codes, just insert the cartoon as an image, it does not even have to be a slider as mentioned, or if you want it to be a slider then follow the steps in #1.
#4 We are not familiar with this product, regardless the procedure is the same, only the interface is different. This is not really related to LayerSlider, it's a common web thing.
#5 What this code does is that it navigates to the next slide when the specified element is clicked (it does not have to be related to LayerSlider). This requires custom coding and web development experience, but you do not need this. If it's inside a slider you can simply use the linking field of a layer and select "Switch to the next slide" value, so there is no coding. The second code snippet is for jumping to a certain slide. This can also be achieved in the plugin without any coding.
As we can see the problem is that you want to make everything in one slider. But the popup slider has to be a different one. There is the original slider and the popup that will be opened, separate ones. However the trigger does not necessarily has to be inside a slider as mentioned. But if you still want to add both of them as a slider, we attached some screenshots for you. This example shows two separete sliders, and the popup opens by clicking on the bag in the other slider.