Jump to content

BXSILDER not working in Mican skin


peterp
 Share

Recommended Posts

Hi All,

I have a problem that seems simple enough but unfortunately I cannot figure it out. What is happening is I have setup a set of images that should slide across the screen in the home page document however what happens is that they get all stacked on top of each other so that you only see the last image. I originally copied bxslider from foundation to my skin (Mican) so I think it's all there I have checked various solutions but I must be missing something.

I hope somebody can help even if there is a better way of doing might help

Best Regards,

Peterp

Link to comment
Share on other sites

I would like for you to read this conversation:

https://forums.cubecart.com/topic/56771-how-do-i-get-the-bxslider-to-work-in-skin-kurouto-skin-cant-add-favicon-either/

The same edits should work for Mican.

Link to comment
Share on other sites

Hi brian,

I have applied this changes as is suggested in the conversation however there is no change. I did notice that if I run the same documents as in the mican skin but use the foundation skin I get the same result. I did find that the program jquery.bxslider.js did not exist in the foundation skin however the jquery.bxslider.min..js so I used this one which may not be right.

After all of the changes have been completed the slider does not slide but does show the last image that is defined in the document content it also advances the dots by 1 beneath the image the direction buttons do not work either. I have attached a listing of the main.php program. The client is using version 6.1.15 and doesn't want to upgrade at this point in time.

Hope you can help me please.

Best regards,

Peterp

workgearselect std.docx

Link to comment
Share on other sites

Please delete the .docx attachment above and then attach a plain text file. (Have Word save it as a plain text file.)

I am looking at workgearselect, but do not see any remnant of images that are misbehaving. (Edit: I see them now.)

I would also highly recommend that you change the name of your custom skin to use underscores instead of spaces.

 

I also see doubled opening HTML comment tags in front of your Splash screen end code. I see comments within comments. That will be a problem.

I also see what appears to be hard-coded HTML that resembles what the BXSlider code would be generating on its own.

 

Edited by bsmither
Link to comment
Share on other sites

Hi Brian,

The splash screen is not used and could be completely eliminated and the reason the hard coding was done was the client didn't originally want anything to change they have now changed their minds and want to be able to add and delete images in the top part of the screen,hence my reason to revert back to the bxslider. Basically the code that is controlling to top part of the page is to go and be replaced by other scrolling images that the client will determine, they are completely unable to use any programming language. Point taken about using underscores and will use this in the future. Do you want me to attach the plain text file of the program main.php

Thanks for the help

Best regards,

Peterp

Link to comment
Share on other sites

That's great Brian thanks again for your invaluable help. I had thought of starting from a clean Mican skin if that would be easier. The client also needs to be able to see and modify not only the home page bx-slider but also an extra home page. this extra homepage I think can be done via a snippet and I think I've done this before so I will look for it

Thanks again brian

Best Regards,

Peterp

Link to comment
Share on other sites

Let's start fixing a few things.

You said the "splash screen" code could be removed. Go ahead and do that.

There is this:

                        <div class="bx-pager-item"><a href="" data-slide-index="14" class="bx-pager-link">15</a></div>  
                    </div>  
                </div>  -->
            </div>
        </div>
        
 </head>
    <body>
        <div id="header">
            <div id="boxes">

Remove the </head> and <body> tags.

There is this:

            <a href="https://workgearselect.com.au"><img src="https://workgearselect.com.au/images/logos/wg7--website-logo-20.png"; alt="SPECIAL GIVE  AWAY  FREE WORK SOCKS - WorkGearSelect Totally Workwear, Work Clothes, Work Boots Hi-Vis Online" />
            </a>
             <form id="currency_select" action="https://workgearselect.com.au/" method="post">

Remove the semi-colon after the img src attribute.

And there is this:

        <div id="announcement">           
<!--            <h1>Welcome to Work Gear Select</h1>  
  <div class="bx-wrapper" style="width: 100%;"> --> 
              <div class="bx-wrapper" style="width: 1100px;">
                <div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 380px;">
                    <ul class="bxslider" style="width: 11215%; position: relative; transition-duration: 0.5s; transform: translate3d(-4400px, 0px, 0px);">
                       <li style="float: left; list-style: outside none none; position: relative; width: 1100px;" aria-hidden="true">
                       <centre><img alt="" src="https://workgearselect.com.au/images/new images/skechers-men.png" style="width: 1100px; height: 377px;"></li>

Change to:

        <div id="announcement">           
           <ul class="bxslider">
               <li><img alt="" src="https://workgearselect.com.au/images/new images/skechers-men.png"></li>

And change all the other list items of these images to match the above <li> statement.
Delete the corresponding </div> tags that matched the two active <div> statements that were removed.

Near the bottom there is:

    </script>
    <script src="https://workgearselect.com.au/skins/workgearselect mican/js/vendor/jquery.bxslider.min.js" type="text/javascript"></script>
    
    <!-- <script>
        {
            literal
        } <
        !--$(document).foundation({
            equalizer: {
                equalize_on_stack: true
            }
        });
        -- >
        $('.bxslider').bxSlider({
            auto: true,
            captions: true
        }); <
        !--$('.chzn-select').chosen({
            width: "100%",
            search_contains: true
        });
        -- > {
            /literal}

    </script>  -->
    <script>
        
		$('.bxslider').bxSlider({auto: true,captions: true });  
           
    </script>

Change to:

<script>{literal}
  $(document).foundation({equalizer: {equalize_on_stack: true}});
  $('.bxslider').bxSlider({auto: true, captions: true});
  $('.chzn-select').chosen({width: "100%", search_contains: true});
{/literal}</script>

Make sure that jquery.bxslider.min.js is located in CubeCart's /js/ folder (as opposed to /js/vendor/).

Edited by bsmither
Link to comment
Share on other sites

Hi Brian,

I have done these changes to my localhost test system and it is closer than what it was so thanks for that, however where the individual images are hard coded I would like to have the images that have been setup in the document tab in admin.  I guess what I'm saying is to remove the lines

<li style="float: left; list-style: outside none none; position: relative; width: 1100px;" aria-hidden="true">
                       <centre><img alt="" src="{$STORE_URL}/images/new images/skechers-men.png" style="width: 1100px; height: 377px;"></li>
                        <li style="float: left; list-style: outside none none; position: relative; width: 1100px;" aria-hidden="true">
                            <center><img alt="" src="{$STORE_URL}/images/source/puma_footwear_-Urban.jpg" style="width: 1100px; height: 377px;"></center>
                        </li>
                        <li style="float: left; list-style: outside none none; position: relative; width: 1100px;" aria-hidden="true">
                            <center><img alt="" src="{$STORE_URL}/images/new images/Sitemaster-Stone-slide-show.png" style="width: 1100px; height: 377px;"></center>
                        </li>  

etc.

down to line 65 and replace it with the lines from the "welcome home" document tab in admin. I have a snippet has been setup to allow for multiple home documents as suggested by you on the 19th June. which seems to work however the home page document appears after it but with the images are displayed one after each other and do not slider either. These are the images I wish to display at the top. I have attached a text document of my current main.php which is not the live main.php as the client is still using the live one. The current main.php is on a localhost but it is a copy of the live system except for the changes I have done.

Hope this helps

Thanks for your help very much appreciated

Best Regards

Peterp

workgearselect current html.txt

Link to comment
Share on other sites

Hi Brian,

Over the weekend I have been investigating this issue and finally have found the solution. What I had to do is in the content.homepage.php program was to insert the check for the extra home page and then in the main.php program check for the original home page and that works. In the admin documents tab you still have the original home 'Welcome to....' page but there is an alternate home page created via a snippet that you sent me earlier which is checked in the content.homepage.php program.

Thanks very much for your help with this issue always appreciated

Best Regards,

Peterp

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...