Jump to content

virtual pagination problem


justinchrono

Recommended Posts

1) Script Title:

Virtual Pagination script v2.1

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...pagination.htm

3) Describe problem:

 

I am using this script for a slideshow of about 60 pictures...when there are multiple rows of numbers to click, they all stack up on each other, and are squished together. So, it is hard to click on the buttons.

Any ideas?

Link to comment
Share on other sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

 

<!DOCTYPE HTML>

<script type="text/javascript" src="virtualpaginate.js">

 

/***********************************************

* Virtual Pagination script- &#65533; Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

 

</script>

 

<style type="text/css">

 

/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/

 

.paginationstyle{ /*Style for demo pagination divs*/

width: 1250px;

text-align: center;

padding: 2px 0;

margin: 10px 0;

}

 

.paginationstyle select{ /*Style for demo pagination divs' select menu*/

border: 1px solid navy;

margin: 0 15px;

}

 

.paginationstyle a{ /*Pagination links style*/

padding: 0 5px;

text-decoration: none;

border: 1px solid black;

color: navy;

background-color: white;

}

 

.paginationstyle a:hover, .paginationstyle a.selected{

color: #000;

background-color: #FEE496;

}

 

.paginationstyle a.disabled, .paginationstyle a.disabled:hover{ /*Style for "disabled" previous or next link*/

background-color: white;

cursor: default;

color: #929292;

border-color: transparent;

}

 

.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */

border: 0;

padding: 0;

}

 

.paginationstyle a.imglinks img{

vertical-align: bottom;

border: 0;

}

 

.paginationstyle a.imglinks a:hover{

background: none;

}

 

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/

color: #000;

background-color: yellow;

}

 

</style>

<script type="text/javascript">

 

var pagecontent=new virtualpaginate({

piececlass: "virtualpage", //class of container for each piece of content

piececontainer: "div", //container element type (ie: "div", "p" etc)

pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)

defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.

wraparound: false,

persist: false //Remember last viewed page and recall it when user returns within a browser session?

})

 

pagecontent.buildpagination(["paginatediv"])

 

</script>

 

</head>

 

 

 

<body>

<title>Panopticon Gallery of Photography</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="keywords" content="Panopticon Gallery, Bradford Washburn, Brad Washburn, Ernest Withers, Ernest C. Withers, Earnest Withers, Earnest C. Withers, B.A. King, Alex MacLean, Contantine Manos, Dr. Dain Taster, Karin Rosenthal, Paul Wainwright, Tony Decaneas, Vittorio Sella, Ron Pownall, Charles Gauthier, Steve Rosenthal, Mark Sandrof, John Woolf, Jane Tuckerman, John Rosenthal, Peter Vanderwarker, Dorothy Kerper Monnelly">

<meta name="description" content="Panopticon Gallery is the exclusive agent for aerial photographer Brad Washburn, Civil Rights photographer Ernest C. Withers, the estate of Vittorio Sella, and also represents many contemporary photographers." />

<link rel="stylesheet" href="./new/css/_style3.css" type="text/css" />

<link rel="stylesheet" href="./css/_style-menu.css" type="text/css" />

<link rel="stylesheet" href="./new/css/lightbox.css" type="text/css" media="screen" />

 

 

<div style="width: 650px; height: 500px; padding: 30px 0px 0px 45px;">

 

<!-- Virtual Pagination Demo 4  -->

 

 

<div style="width: 300px; height: 230px;">

 

<div class="virtualpage4 hidepiece">

<img src="/i/photo/bpl-bbst11483-600-453.jpg"/>

</div>

Link to comment
Share on other sites

<div class="virtualpage4 hidepiece">

<img src="/i/photo/bpl-wsrinehart864-347-450.jpg" />

</div>

<div class="virtualpage4 hidepiece">

<img src="/i/photo/bpl-wsrinehart999-346-450.jpg" />

</div>

 

 

 

</div>

</div>

 

<!-- Pagination DIV for Demo 4 -->

<div style="padding: 0 0 0 30px;"

<div id="galleryalt" class="paginationstyle" style="width: 500px; text-align: left">

<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>

</div>

</div>

<!-- Initialize Demo 4 -->

<script type="text/javascript">

 

var gallery4=new virtualpaginate({

piececlass: "virtualpage4",

piececontainer: 'div',

pieces_per_page: 1,

defaultpage: 0,

wraparound: false,

persist: true

})

 

gallery4.buildpagination(["galleryalt"],["1", "2", "3", "4"] )

 

</script>

 

<hr style="margin-top: 35px; color: red" />

 

 

</script>

</body>

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.