Hi Tig. I looked at source code of your panorama, but haven't understood the functionality, how it's made...

I simply bring you a question, how to make panorama like your that's panning while dragging mouse? I want to implement the function on my WordPress as a shortcode, just like infobox, warnbox and some others...

If you could explain the code used for that example, I'd be happy :)

The old code works, but is a bit of a mess. The new code (which is not available yet and may be changed) works a lot better and a is a lot cleaner too.

You need to look into Javascript event listeners. You need a "mousedown", "mousemove" and "mouseup" listener.

Once you have that, you will need to adjust the position of the four images in the panorama base on on their current position in relation to the amount the mouse moved on the x plane.

It is not that hard if you know some basic CSS and Javascript (I would even say is a good learning project). If you do not know the basics however, I'm not going to be able to help much even if I posted all the code here.

I need only the described code for panorama, the event listeners and the function ahead... I should edit the specs for my needs to use as shortcode...

I'll wait for the design update if necessary...

This is the HTML:

<div id="panoramaContain">
<div id="panoramaWrap">
<div class="tBar">Panorama
<div id="panNote" class="fRight fNorm fSml">Click and drag to view panorama.</div>
</div>
<div id="panorama">
<div id="pan01" class="panDiv" style="left:0px;background-image:url('/levels/ep_procedures/ep_procedures01.jpg')"></div>
<div id="pan02" class="panDiv" style="left:480px;background-image:url('/levels/ep_procedures/ep_procedures02.jpg')"></div>
<div id="pan03" class="panDiv" style="left:960px;background-image:url('/levels/ep_procedures/ep_procedures03.jpg')"></div>
<div id="pan04" class="panDiv" style="left:-480px;background-image:url('/levels/ep_procedures/ep_procedures04.jpg')"></div>
</div>
<div class="clr"><div class="tBar2"><a href="/panorama/Dynasty" class="tip">Previous release<span class="fNorm">Dynasty</span></a>&#160;<div class="fRight"><a href="/panorama/id:1" class="tip">First release<span class="fNorm">The Final Hour</span></a></div></div></div>
</div>

This is the CSS:

#panoramaContain {
width:80%;
max-width:1200px;
margin:auto
}
#panoramaWrap {
position:absolute;
top:109px;
width:80%;
max-width:1200px
}
#panorama {
position:relative;
height:480px;
width:100%;
max-width:1200px;
float:right;
text-align:left;
white-space:nowrap;
overflow:hidden
}
.panDiv {
user-select:none;
position:absolute;
width:480px;
height:480px;
background-repeat:no-repeat;
}

This is the current Javascript:

<script type="text/javascript">
var panDiv;
var pan = [{ 'p':null,'x':0 }, { 'p':null,'x':480}, {'p':null,'x':960}, {'p':null,'x':-480 }];
var mPosStart = 0;
var touchDevice = ('ontouchstart' in document.documentElement) ? true : false;

function addListener(elm, handle, func) {
if (elm.addEventListener) {
elm.addEventListener(handle, func, false);
} else {
elm.attachEvent('on'+ handle, func);
}
}
function removeListener(elm, handle, func) {
if (elm.removeEventListener) {
elm.removeEventListener(handle, func, false);
} else {
elm.detachEvent('on'+ handle,func);
}
}

function panDown(e) {
document.onselectstart = function(){return false;};
panDiv.style.cursor = 'move';
if (touchDevice) {
addListener(panDiv,'touchmove',panMoveTouch);
addListener(panDiv,'touchend',panUp);
mPosStart = e.targetTouches[0].pageX;
} else {
addListener(panDiv,'mousemove',panMove);
addListener(panDiv,'mouseup',panUp);
mPosStart = e.clientX;
}
}

function panUp(e) {
for(x in pan) {
pan[x].x = parseInt(pan[x].p.style.left);
}
panDiv.style.cursor = 'default';
if (touchDevice) {
removeListener(panDiv,'touchmove',panMoveTouch);
} else {
removeListener(panDiv,'mousemove',panMove);
}
document.onselectstart = null;
}
function panMoveTouch(e) {
e.preventDefault();
panPosition((mPosStart - e.targetTouches[0].pageX));
}
function panMove(e) {
panPosition((mPosStart - e.clientX));
}
function panPosition(moved) {
// DEBUG.innerHTML = 'moved:['+ moved +']';
var newPos = 0, min = 0, minId = 0, max = 0, maxId = 0;
for(x in pan) {
newPos = (pan[x].x - moved);
pan[x].p.style.left = newPos +'px';
if (newPos < min) {
min = newPos;
minId = x;
} else if (newPos > max) {
max = newPos;
maxId = x;
}
}
// check for a loop
if (min < -480) {
pan[minId].x += 1920;
} else if (max > 1440) {
pan[maxId].x -= 1920;
}
}
function panListener() {
if (document.getElementById('panorama')) {
panDiv = document.getElementById('panorama');
pan[0].p = document.getElementById('pan01');
pan[1].p = document.getElementById('pan02');
pan[2].p = document.getElementById('pan03');
pan[3].p = document.getElementById('pan04');

panDiv.onselectstart = function(){return false;};

addListener(panDiv,((touchDevice) ? 'touchstart' : 'mousedown'),panDown);
}
}
panListener();
</script>
Edited 19.2 days after the original posting.

Have made testing page on my computer using your Testing Procedures panorama... It's working correctly, that's what I was finding... Then I should think about the implemetation in WP...

Now I need to repair your panorama script with the model hack... Oh have a question exactly: To set player model I should use the seta model "biker/stroggo" in q3config.cfg? Because when tried to load the script it shows model TankJr with default skin and have freezed my computer...

Also higher number of timescale should INCREASE the motion speed, not decrease... I've converted the extra high number to extra low number to make slow motion. Also it's possible there are too much digits than engine allows... I should edit that to less digits after unsucessful try...

Panorama screenshot script was sucessfully got working, hack was sucessfully got working, too.

I had to rename your hack shader file to models_hack.shader and remove all contents except for biker/stroggo skin and the machinegun texture hack... Now it's working properly :)

Also the timescale was corrected, it's 0.00000001 now, not 10000000 :)

Have made a panorama screenshot of my testing map dm17_3p1 (The Longest Yard 3+1) - There's a link to download full version: dl.dropbox.com/u/7...t/pano_full.jpg
Screenshot from my testing page: dl.dropbox.com/u/7...p1_panoshot.jpg
Working though :)
Edited 49.95 minutes after the original posting.

Since I was thinking about, I decided to make separated pages that uses normal HTML and put the panoramas here...
No awful shortcode in WP to broke it, just make a HTML webpage and link to the page...

Glad to hear you have something working. Not sure where you got the timescale stuff from. The value in my cfg is "0.0000001".

The timescale SP tip was on EasterEggs.com websites - eeggs.com/
Concretely there is a tip how to make slowmotion and play like a boss :) - eeggs.com/items/36399.html
BTW, far days I had problems with timescale when tried to vote. I had exected timescale config that have overrided the settings. Now I'm glad I've removed that script from my computer. It was mentioned as config for defrag demos...

Wow, have added a digit than you have and it's still working... I have 10^-7, not 10^-6 :) Looks like I should have clearer panoramas than your :) Maybe I'll send you any nasty panoramas from my levels to be used. Also some nice screenshots. I'm using GIMP, so your panorama building script (the PS pano-raw.bat batch file) won't work for me...