Placing slideshow.

[scrambler]

Ok, so my understanding is that the meta slider “layered image” is just so you can have sliders with different layers of content.. Please confirm.

The part I still do not understand is

“I then created little transparent images attached to a URL which could be placed over the Menu Navigation. I did this because I have 34 pages all with different colors and type. I thought this would be the easiest way to create the Menu Navigation. I now want to place  a different slideshow on the right hand side of seventeen of the pages”

What does the menu has to do with all this?

If you have 17 pages each with it own slideshow, then you will insert the proper slideshow in each page at the same place.

So you need to describe precisely what you are trying to do, and NOT what you have done.

Note: do not post page preview links, they are not accessible, you need to publish a page for me to be able to see it

[reptyler]

scrambler

If you go to the opening page, http://bernstein-exhibitions.com, you will find a seventeen page slider. I used the image layer tool to create small transparent images which can be connected to a URL. These small transparent links are placed over INTRO, PROJECT LIST, BIO and the MORE button at  the borrow right of the page. Each of the seventeen slides need to be linked to a separate page where I will be placing a unique slide show on each of those pages. The links for each button now go back to the home page but will eventually go to specific pages related to each individual exhbition page.  I need to know if I can create a div that will allow me to place the slideshows.

Where should I send the aspirin? sT

[reptyler]

scrambler

Perhaps you know a better way to create the navigation menus then I could make each page a  featured image and place the slideshow div on that. If I am still  confusing you perhaps a brief phone call might help. I can bee reached at 269-343-4925, pretty much anytime.

sT

[scrambler]

So to make sure I am understanding what you are trying to achieve.

1- On the opening page, you want to have a 17 page slider, where each page/image has a set of clickable links/menu items (top left and bottom right), which (and this is the key) are specific to the active/visible page. So for example, the INTRO item will link to a different target on every of the 17 pages, same for all the other menu/link items.

If that is the case, you will need to check with meta slider if that is indeed possible, because what you have now is a fixed set of menus items overlaid on all the 17 pages. This means that the menu item layers are always the same. I do not know if meta slider will let you create different menu layers for the different images.

What you are describing is in fact a slider over a slider. One slider has 17 set of menu links, and it would be over another slider that has 17 images. Both slider changing in perfect synchronicity. You do need to make sure meta Slider will let you do that, and make a test that proves it does, and where each image has a different set of menu layered on top of it.

Because if not, then you will need a different approach for that (like using CSS to overlay two sliders).

2- As for the pages that the slider pages/images link to, I don’t see why they could not be created like any other content page, with a mix of content and a slider. Based on what I had seen, just using 2 columns html divs would do it, unless you explain in more detail why that would not.

Summary: Above are two separate and completely different issues.

• You need to clarify and validate #1 with a test
• You need to create one of the 17 pages using regular HTML and div columns to mix content and slider, and if it does not quite do what you want for these pages, explain why.

 

[reptyler]

scrambler

• You need to clarify and validate #1 with a test
• I have I can change any of the links on all slide pages to whatever URL I wish.
• You need to create one of the 17 pages using regular HTML and div columns to mix content and slider, and if it does not quite do what you want for these pages, explain why.
• The problem here is that each of the additional pages have to have the same navigation as the slide pages in the opening slideshow and they are all different. Is there any way I can create all of these different links in Weaver? If not I need to convert the slideshow pages to images which will hold the layers. I previously gave this as an example,http://www.corporationhall.com/sustainability-1/http://www.corporationhall.com/sustainability-1/. This is a site both you and Weaver helped me create several years ago. The page was created in DreamWeaver but I was able to transfer it to the sight. I provided you with the html for one of the secondary page links in the hopes we might be able to save the links created In Meta Slider using layer image to create an image like the one referenced above but created in DreamWeaver. Then we could put a div on the right site to nest all the additional slideshows. I have been researching divs most of the afternoon and believe one could be positioned on a featured page I’m just worried about the navigation links. I will spend some time creating a page is DreamWeaver and attempt to place a div on the right side. Please advise a phone call might still get us both on the same page.
• Always, sT

[scrambler]

“The problem here is that each of the additional pages have to have the same navigation as the slide pages in the opening slideshow and they are all different.”

Unless I don’t understand what you are saying, I really do not understand your problem here.

You will be creating the content for each page, so you can put in whatever links you need in each one. You can do that manually with HTML, or you can even use the WordPress Custom Menus and the theme menu bar tools if they suit you. You can create as many custom menus as you want, and with the “plus” plugin, you can insert menu bars using the extra menu shortcode that will reference the proper menu in each page.

If you do not have Plus, you can create link buttons manually with HTML to link to whatever you need in each page.

Making an image be a link in HTML is trivial, it looks like

<a href="url"> <img src="Imageurl" /> </a>

If you are really at a loss on how to write the HTML to create your page layout, make a mockup and post it here.

 

[reptyler]

Good morning scrambler,

1. The first URL is, http://bernstein-exhibitions.com/slider-featured-image/. This is the image created in the Meta Slider program. I am showing it as an example of where the right hand div would need to go. And, I received this message from Meta Slider,
   Hi Stephen,<br clear=”none” /><br clear=”none” />Can you please add this custom CSS to your theme:<br clear=”none” /><br clear=”none” />.metaslider-9 .flexslider .flex-direction-nav .flex-next,<br clear=”none” />.metaslider-9 .flexslider .flex-direction-nav .flex-prev {<br clear=”none” />margin-top: -60px;<br clear=”none” />}<br clear=”none” /><br clear=”none” />Kind Regards,<br clear=”none” />Bryle<br clear=”none” /><br clear=”none” />–<br clear=”none” />Bryle Crodua<br clear=”none” />[email protected]

   I emailed them back to see if this cured the problem of nesting a slide show into another slide show. Or, would a separate static page with a div container need to be created. It’s after 6pm in the UK now so I doubt I will here back until tomorrow.
2. The second image is the same image jpeg set as a featured image. This image would need to have a container div added and the Navigation Menu created. In order to create the Navigation   Menu I would have to lasso the INTRO, PROJECT LIST, BIO and MORE button and create a URL for each.  I have Weaver Plus but I don’t understand how that could be done. The CSS sent by Meta Slider I am assuming will need to be placed separately on each page, since each page will have a different slide show. And as well the featured image on this page is not appearing full screen until you click on it. I will need to figure that out.
3. In the meantime I will move to the larger screened computer and use Fire Bug to see how the container div might work.  Please Advise sT

[scrambler]

The base HTML structure that would create the layout for your page is fairly simple, and would look like the following

Create a picture that contains the BERNSTEIN EXHIBITIONS text over the blue background, let us call it menu-bg
Create 3 images with an orange background and the menu text (one for INTRO, one for PROJECT LIST and one for BIOGRAPHY)

Then create a new page, switch the content editor to TEXT, and check the page option “Allow Raw HTML and script”

Then place the HTML below in the content editor

<div class="mymenu">
<a href="IntrolinkUrl"> <img style="margin-right:1.5%;" src="introImageUrl" /></a>
<a href="ProjectlinkUrl"> <img style="margin-right:1.5%;" src="projectImageUrl" /></a>
<a href="BiolinkUrl"> <img src="bioImageUrl" /></a>
</div>

<div style="margin-top:-50px;">
<div style="padding-top:100px;" class="content-2-col">Place your Edwin carter content in there</div>
<div class="content-2-col">Place the slider shortcode in there</div>
</div>
<div style="clear:both;"></div>

Then place the styling rules below in the Theme Global Custom CSS Rule box
.mymenu {width:40%;padding:50px 10px 10px 10px;background:url(menu-bgImageUrl) no-repeat;background-size:cover;}
.mymenu img {float:left;width:29%;}

I am sure it will need some tweaking, but we can work that out when you post the link with that in place.
Using simple HTML, you should not need the CSS from metaslider.

[reptyler]

Where is the, Theme Global Custom CSS Rule box?

[reptyler]

Scrambler,

Found the Theme Global Custom CSS box. entered your code at the end of the code that was already there. Here is the result, http://bernstein-exhibitions.com/testweavernewnav/. Also, in order to do what you are requesting I will need to request the Illustrator files for the 34 pages we are discussing, to be able to separate all the individual elements from each page. The links have already been created seems like we are recreating the wheel. A few years ago I was able to create these links in DreamWeaver, http://www.corporationhall.com/sustainability-1/. Why would I want to create an individual menu for all 34 pages? Thanks for all you are doing, but I’m confused.

sT

[scrambler]

1- You appear to have pasted the HTML code as text in the content editor…

You probably did that by not switching the editor the TEXT mode before pasting.

If you leave the content editor in VISUAL mode, the HTML will be treated as text.

Please reread my post Carefully. “Then create a new page, switch the content editor to TEXT, and check the page option “Allow Raw HTML and script””

If the content editor is in text mode, when you paste the HTML, it should look exactly as it does in my post.

Also, you need to replace all the url in italics like IntrolinkUrl, ProjectlinkUrl, introImageUrl, projectImageUrl, BiolinkUrl, bioImageUrl, by the actual images urls and link urls.

2- “The links have already been created seems like we are recreating the wheel. “

If by that you mean that you want to reuse what you created with metaslider to create the individual page, then you need to work with them to make the layout work. I cannot help you solve the layout issues of a plugin I know nothing of.

Sorry.

PS: I think you are taking on more than you know how to do. If you are going to design sites, you will need to learn more about HTML and CSS. We can help, but we cannot do your job for you…

[reptyler]

scrambler,

Originally I wanted one question answered “how to covert a slide image into a static image”  two weeks later we are in a conversation on how to change the entire HTML. The graphic layouts are in place. Perhaps it’s not me that is taking on more then they know how then they can due.

sT

[scrambler]

If what you mean by slide image is a multi layer metaslider “slide”, then you could simply use any screen copy program like the windows snipping tool, to copy the content of your screen and save it as an image.

There may be a way using metaslider, but again that is a question for them, as I know nothing about metaslider and how they work.

[reptyler]

Hello scrambler

Here is a question I presented to Mete Slider;

On Tue, Sep 12, 2017 at 13:12:48 BST, Stephen Tyler <[email protected]> wrote:

Hello again Bryle<br clear=”none” /><br clear=”none” />I f you go to this link you will see where I want to place the container div,<br clear=”none” />http://bernstein-exhibitions.com/slider-featured-image/. The shaded area on the right is where <br clear=”none” />I need the slider to go. If this is a content container div can I place a slider<br clear=”none” />there?<br clear=”none” /><br clear=”none” />sT

Here is the answer I received;

Hi Stephen,<br clear=”none” /><br clear=”none” />Yes, you can place the slider within the container div.<br clear=”none” /><br clear=”none” />We follow GMT+1 time or UK time.<br clear=”none” /><br clear=”none” />Kind Regards,<br clear=”none” />Bryle<br clear=”none” /><br clear=”none” />–<br clear=”none” />Bryle Crodua<br clear=”none” />[email protected]

{#HS:428490577-17083#}

On Tue, Sep 12, 2017 at 13:12:48 BST, Stephen Tyler <[email protected]> wrote:

Hello again Bryle<br clear=”none” /><br clear=”none” />I f you go to this link you will see where I want to place the container div,<br clear=”none” />http://bernstein-exhibitions.com/slider-featured-image/. The shaded area on the right is where <br clear=”none” />I need the slider to go. If this is a content container div can I place a slider<br clear=”none” />there?<br clear=”none” /><br clear=”none” />sT<br clear=”none” /><br clear=”none” /><br clear=”none” /><br clear=”none” />

On Tue, Sep 12, 2017 at 12:50:28 BST, Stephen Tyler <[email protected]> wrote:

Hello Bryle<br clear=”none” /><br clear=”none” />Can I still place the slide show in a content container div?<br clear=”none” />Also what time is it wherever you are? This will give me a<br clear=”none” />better idea of when to communicate.<br clear=”none” /><br clear=”none” />Always, sT

Scrambler i am truly sorry if things got terse yesterday. I truly appreciate your efforts, And, would be thankful for your advice on placing this div.

I can’t begin to tell you how thankful I am for your support.

sT

<br clear=”none” /><br clear=”none” />

[scrambler]

Let me try again.

If I go to your page http://bernstein-exhibitions.com/slider-featured-image/
If I right click on the grey box and clcik inspect, it shows me the HTML which is

<div class="layer" style="left: 879px; top: 73px; width: 888px; height: 888px; line-height: 181%; font-size: 181%; position: absolute;" data-left="485" data-top="40" data-height="490" data-width="490">
 <div class="animation_in animated disabled" style="width: 100%; height: 100%;" data-animation-delay="0" data-animation="disabled">
  <div class="animation_out animated disabled" style="height: 100%; width: 100%;" data-animation-delay="0" data-animation="disabled">
   <div class="ms_content_wrap" style="height: 100%; background-color: rgba(142, 142, 142, 0.219608);">
    <div class="content" id="layer_content_812019329" style="padding: 9px; color: white; position: relative;" data-padding="5">
    </div>
   </div>
  </div>
 </div>
</div>

The grey box is the div highlighted in yellow
That HTML is obviously generated by your plugin, I have no idea how to manipulate it or add things to it.
If allowed by your plugin (their last answer tends to say yes), what you need, is to add the slider shortcode to the div highlighted in yellow. Once you did that, the HTML of the yellow div would now look like

<div class="content" id="layer_content_812019329" style="padding: 9px; color: white; position: relative;" data-padding="5">
Slider shortcode
</div>

How to do that? I have no way to know, as I do not know the plugin that is generating all that HTML.

And this is why only they can explain to you how to proceed to insert your slider shortcode inside of that container.

The question you need to ask them is not IF you can place the slider there, but HOW do you do it.

[reptyler]

Arizil,

Meta Slider Pro.

sT

[Author]

Posts