Virtual pagination edit

[dbldee]

1) Script Title: Virtual pagination V2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.htm

3) Describe problem: Need to adjust size of container
both CSS and image edit were unsuccessfull.



Test installation

[azoomer]

Try changing the numbers in the paragraph highlighted in red. That should change the size of the container.

<!-- Virtual Pagination Demo 4  -->
<h3>Demo 4 (shows "flatview" pagination interface with custom text defined):</h3>

<div style="width: 450px; height: 350px;">

<div class="virtualpage4 hidepiece">
<img src="http://img25.imageshack.us/img25/8442/castlei.gif width="450" height="300" />
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>

</div>

[dbldee]

It appears that the div does change in size , but perhaps being virtual it is not seen

the images do not appear to be resized
thanks

[dbldee]

Some resolving
I did not realize this may be a universal problem but
Images will not be re-sized if they are not hosted in the same location

same server,
same folder

[ddadmin]

Why not just give your images explicit width/height attributes to control their dimensions as desired?

[dbldee]

Good suggestion

More discovery.
Need to replace the text links with images

Created a folder with the images in it
the virtualpaginate.js has been edited

USTOMIZATION
var imgdir = './images/'; //path to images directory (notice the trailing slash)

and initialize script

<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"], ["castle.jpg", "park.jpg", "harvest.jpg", "country.jpg"])

</script>

Is there some other adjustment required , Or is there a syntax error somwhere?

test installation

[dbldee]

Solving
using rel url for img locations

How/where can the original boxes for the text links be removed?

thank you




test install

[ddadmin]

Just use CSS. The pagination links, in this case, thumbnail images, are dynamically added inside the SPAN element:

<span class="flatview"></span>

So to get rid of the default image border, in your CSS, you can do something like:

span.flatview a{
border-width:0;
}

[dbldee]

Thanks John
All images are of different sizes and from different locations
I would like to have them all render at the same size.
to avoid having to edit each one individually, as there are scores of them
I have tried unsuccessfully to set all images in CSS, but something's still missing

.img {
width: 500px;
height: 400px;
}

and my eyes will not tell me what it is

Assistance appreciated


thank you

[dbldee]

Does anyone have some insight as to where the edits are made
I have tried both the CSS

.img src {

width: 500px;

height: 400px;

}

and the div

<div style="width: 550px; height: 450px;">

but no joy..

thanks