PDA

View Full Version : Enable multiple same-page popUps with JQuery


johnMoss
09-21-2011, 06:15 PM
The [under construction] page referenced here is

http://www.johnmossdesigns.com/gallery.html


I've been able to modify properties with the JQuery magic! code both in the js and the CSS but am getting stumped on this one.

I have 6 pop up boxes under 6 photo galleries. The pop-ups are activated by clicking on the red arrow "read more"...

Right now the first two (small sites, large sites) are the only ones active. Each pop up has it's own wording, but the js script is only reading the last entry. (If you click on the 'small site' button, it is pulling the large site copy.)

The code I pulled was initially set up for a single window on the page, and hence all the css was set to ID, which I changed to class. Everything works fine, except I need for the js script to recognize each pop-up as unique.

Here is one section of the HTML, and the corresponding and script.

The question is what, and where to insert modified script and/or code?



<!--start JQuery-->

<div class="button"><input type="image" src="images/submitButton.gif" alt="Read more"/></div>
</center>
<div class="popupContact">

<h1>More on Smaller Sites...</h1>

<p class="contactArea">
<span class="JQBoxPhoto"><img src="images/popUpPicturesSmallSites.gif" width="125" height="71" alt="smallSite Gallery Picture"></span>.....my copy...
</p>

<a class="popupContactClose"><img src="images/closeP.gif" width="78" height="25" alt="closeWindow"></a>

</div><!--end popUpContact-->
<div class="backgroundPopup"></div>

<!--end JQuery-->



//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$(".backgroundPopup").css({
"opacity": "0.7"
});
$(".backgroundPopup").fadeIn("slow");
$(".popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(".backgroundPopup").fadeOut("slow");
$(".popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupContact").height();
var popupWidth = $(".popupContact").width();
//centering
$(".popupContact").css({
"position": "fixed",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$(".backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$(".button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$(".popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$(".backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});

gentleone
09-21-2011, 07:37 PM
Hi Johh, why using another script while you have already prettyPhoto on your page? Prettyphoto does support inline content and multiple different ones on the same page just as your gallery.

Check the inline content demo:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#%21prettyPhoto)

johnMoss
09-21-2011, 07:44 PM
Valid point & good call; didn't even occur to me. I'll dive into it. Thanx :)

johnMoss
09-21-2011, 10:06 PM
http://www.johnmossdesigns.com/gallery.html (separate prettyPhoto & JQ magic scripts)

http://www.johnmossdesigns.com/gallery1.html (both scripts prettyPhoto, & pardon the mess!)

OK, I've played with it a bit but it occurs to me I have to have two separate scripts anyway, as I want differences in the box displays. The JQ magic CSS seems a bit easier to manipulate... That said, I've still got issues though:

JQuery Magic

The initial problem above is still an active case. And also somewhere along the way I've managed to screw up the opacity when the JQ Magic box opens up. Where before it was partially blacked out, now it's total, except for the gallery images, which do not dim at all...prettyPhoto

The (gallery pictures) prettyPhoto window is jerky when the screen is scrolled. Anyone know a fix for that? Manipulate the scrollbar to see the effect. Also it doesn't center properly when opened.
The alt attribute with this script is displayed above the screen but is not viewable or partially obscured into the browser on load. Adjust margin on this? If so where? Kinda would like to change the border. Don't see where the attribute is though..
In the prettyPhoto js, the allow resize does it's job allright, but the default width & height settings are being ignored. When changed nothing happens. Reset somewhere else assumedly, but where?(The css, below, is not very intuitive so sorry for that one!)

prettyPhoto CSS

div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat}

div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x}

div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat}

div.facebook .pp_content .ppt{color:#000}

div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y}

div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y}

div.facebook .pp_content{background:#fff}

div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer}

div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer}

div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer}

div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer}

div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer}

div.facebook #pp_full_res .pp_inline{color:#000}

div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat}

div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px}

div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default}

div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px}

div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default}

div.facebook .pp_nav{margin-top:0}div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px}

div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px}

div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px}

div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer}

div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer}

div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat}

div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x}

div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat}

div.pp_pic_holder a:focus{outline:none}

div.pp_overlay{background:#000;display:none;left:0 ;position:absolute;top:0;width:100%;z-index:9500}

div.pp_pic_holder{display:none;position:absolute;w idth:100px;z-index:10000}

.pp_top{height:20px;position:relative}* html .pp_top{padding:0 20px}

.pp_top .pp_left{height:20px;left:0;position:absolute;widt h:20px}

.pp_top .pp_middle{height:20px;left:20px;position:absolute ;right:20px}

* html .pp_top .pp_middle{left:0;position:static}

.pp_top .pp_right{height:20px;left:auto;position:absolute; right:0;top:0;width:20px}

.pp_content{height:40px}.pp_fade{display:none}

.pp_content_container{position:relative;text-align:left;width:100%}

.pp_content_container .pp_left{padding-left:20px}

.pp_content_container .pp_right{padding-right:20px}

.pp_content_container .pp_details{float:left;margin:10px 0 2px 0}

.pp_description{display:none;margin:0 0 5px 0}

.pp_nav{clear:left;float:left;margin:3px 0 0 0}

.pp_nav p{float:left;margin:2px 4px}

.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}

a.pp_arrow_previous,a.pp_arrow_next{display:block; float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}

.pp_hoverContainer{position:absolute;top:0;width:1 00%;z-index:2000}

.pp_gallery{left:50%;margin-top:-50px;position:absolute;z-index:10000}

.pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;overflow:hidden;padding:0;position:relative}

.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflo w:hidden}

.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff}

.pp_gallery ul a img{border:0}

.pp_gallery li{display:block;float:left;margin:0 5px 0 0}

.pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}

.pp_gallery li.default a img{display:none}

.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important}

a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}

a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}

a.pp_expand,a.pp_contract{cursor:pointer;display:n one;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}

a.pp_close{display:block;float:right;line-height:22px;text-indent:-10000px}

.pp_bottom{height:20px;position:relative}

* html .pp_bottom{padding:0 20px}

.pp_bottom .pp_left{height:20px;left:0;position:absolute;widt h:20px}

.pp_bottom .pp_middle{height:20px;left:20px;position:absolute ;right:20px}

* html .pp_bottom .pp_middle{left:0;position:static}

.pp_bottom .pp_right{height:20px;left:auto;position:absolute; right:0;top:0;width:20px}

.pp_loaderIcon{display:block;height:24px;left:50%; margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px}

#pp_full_res{line-height:1 !important}

#pp_full_res .pp_inline{text-align:left}

#pp_full_res .pp_inline p{margin:0 0 15px 0}

div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidd en}

.clearfix {display:inline-block}

* html .clearfix {height:1%}
.lightbox-hide {display: none;}

.clearfix {display:block}

johnMoss
09-22-2011, 12:28 AM
Update:


http://www.johnmossdesigns.com/gallery.html


JQuery Magic
The initial problem above is still an active case.prettyPhoto
The (gallery pictures) prettyPhoto window is jerky when the screen is scrolled. Anyone know a fix for that? Manipulate the scrollbar to see the effect. Kinda would like to change the border. Don't see where the attribute is though..

I resolved the other issues, these I'm still working on...

johnMoss
09-22-2011, 03:29 AM
http://www.johnmossdesigns.com/gallery.html

http://www.johnmossdesigns.com/galleryClassTest.html

I've loaded two identical pages, except that on the second page the Jquery Magic elements have been changed from id to class. The 'ClassTest' page has been given it's own unique JS & CSS files & links, where all is adjusted to class. After a lot of research it looks like an additional line of script is needed to declare the presence of an array in the JS script? I'm getting in over my head on the code but I do get the impression it boils down to some very simple changes. Just don't know how to install them...

johnMoss
09-24-2011, 01:33 PM
I fired off a letter to the author, haven't heard back yet...

johnMoss
09-24-2011, 04:48 PM
Multiple instances of the popup object have to be created. Not finding a tutorial so far that walks the reader through the code implantation. If anybody knows of one... still looking... New javascript objects have to be created, question remains where to put and how to reference them.