WordPress.org

Ready to get started?Download WordPress

Forums

WP Supersized
[resolved] changing place of the navigation buttons (5 posts)

  1. Arathol
    Member
    Posted 1 year ago #

    Hi,

    I am making a responsive site and on smaller screens i move the position of the slider to below the content.

    The problem is, i cannot move the navigation left and right buttons relative to the images as they are outside the container of the images.

    Which file can i edit and what do i edit to move the navigation icons to inside the container of the images to that i can always position them relative to the image container?

    Thanks in advance!

    Regards
    Arathol

    http://wordpress.org/extend/plugins/wp-supersized/

  2. jenstho
    Member
    Posted 1 year ago #

    in the theme-folder there's 3 files. edit supersized.shutter.css

  3. Arathol
    Member
    Posted 1 year ago #

    Hi Jenstho.

    Thanks for that, unfortunately it doesn't answer my question. I know what css to edit and where to edit it, the problem is that the actual html code is not ideal.

    The images are stored in a container and the navigation is stored outside of that container.

    Example:

    <a class="slideshow-previous">prev</a>
    <a class="slideshow-next">next</a>
    <div class="slideshow">
      <ul>
        <li><img>picture 1</img></li>
        <li><img>picture 2</img></li>
      </ul>
    </div>

    Now because of that, I can never position the navigation items relative to the images.

    I need to know where to edit the actual mark-up of the code so I can move the navigation elements inside the container of the slideshow.

    Example (this is what I would like ideally)

    <div class="slideshow-container">
      <ul class="slideshow-images">
        <li><img>picture 1</img></li>
        <li><img>picture 2</img></li>
      </ul>
      <ul class="slideshow-navigation">
        <li class="slideshow-previous"><a>prev</a></li>
        <li class="slideshow-next"><a>next</a></li>
      </ul>
    </div>

    I have found the file to edit it seems: WPSupersized.php (wp-content/plugins/wp-supersized/includes) and it start from line 412. But i dont know how to move that all, or at least put a wrapping div around all of it including the image slider below it?

  4. jenstho
    Member
    Posted 1 year ago #

  5. Arathol
    Member
    Posted 1 year ago #

    This did bring me a little bit closer though and now I have come up with a solution, so thatnks for that. What I have done is as follows (I know it may not be the best or most elegant solution but it does the trick for me so far.)
    In WPSupersized.php (i have the latest version of the plugin and these are the line numbers that correspond to mine - all line numbers are the original line numbers (before adding anything))

    new line after line 387

    <div id="navWrap1"> <!-- add a wrapping div around all nav items -->

    replace line 389 ( <div id="prevthumb"></div> <div id="nextthumb"></div> )

    <div class="thumbWrap1"> <!-- wrap the thumbs nav -->
    	<div id="prevthumb"></div> <div id="nextthumb"></div>
    </div>

    replace line 420 (</div> <?php // closing the controls-wrapper and controls)

    </div> </div> <?php // closing the controls-wrapper and controls and NavWrap1

    replace line 423 (else { )

    else { ?> <div id="navWrap2"> <?php //close php, add a wrapping div around all nav items and reopen php again

    replace line 428 - 430

    <!--Thumbnail Navigation-->
    <div class="thumbWrap2"> <!-- wrap the thumbs nav -->
        <div id="prevthumb"></div>
        <div id="nextthumb"></div>
    </div>

    replace line 436 - 438

    <!-- Arrow Navigation -->
    <div class="arrowNavWrap"> <!-- wrap the arrow nav -->
        <a id="prevslide" class="load-item"></a>
        <a id="nextslide" class="load-item"></a>
    </div>

    replace line 511 ( } )

    }?> </div> <?php //close php, close navWrap2 and reopen php again

    then add this script snippet to the script in the top of the document:
    new line after line 369

    var wrapper = $('<div></div>').addClass('supersizedWrapped');
    var parent = $('#navWrap2').parent();
    wrapper.append($('#navWrap2, #supersized')).appendTo(parent);

    Now the wrapping div (navWrap2) can be set to position: absolute and set .supersizedWrapped to position: relative and you can then change the size of the slideshow and have all the nav stay relative to the .supersizedWrapped container.

    Just be aware that the options i set in supersized only picks up the navWrap2 div so thats whati add in the script to wrap with the default #supersized (slides) div.

    Hope this helps someone.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic