Image Gallery with Modal in repeater - only first image pops up in modal - modal-dialog

I have a image gallery with a modal, written with 2 repeaters (one for the gallery and one for the popup image. It works, but the modal only shows the first popup image in the gallery, instead of next in the sequence. How do I add a unique id to the images?
<div class="imgbox">
<img src="<%# Eval("GalleryImage") %>" alt="
<%# EvalText("ImageAlt", true) %>" Class="GalleryImage" />
<div class="text-wrapper"><%# IfEmpty(Eval("Heading"), "", "
<span class='Heading'>" + Eval
<string>("Heading") + "
</span>") %><%# IfEmpty(Eval("GalleryQuote"), "", "
<span class='GalleryQuote'>" + Eval
<string>("GalleryQuote") + "
</span>") %><%# IfEmpty(Eval("Name"), "", "
<span class='Name'>" + Eval
<string>("Name") + "
</span>") %><%# IfEmpty(Eval("Position"), "", "
<span class='Position'>" + Eval
<string>("Position") + "
</span>") %> <span class="ReadMore">
<a href="#" data-toggle="modal" data-target='#largeModal'>read more</a>
</span>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="largeModal" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="top">
<img src="<%# Eval("PopupImage") %>" alt="
<%# EvalText("ImageAlt", true) %>" Class="PopupImage" />
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<div class="OverlayText"><%# IfEmpty(Eval("GalleryQuote"), "", "
<span class='QuoteOverlay'>" + Eval
<string>("GalleryQuote") + "
</span>") %> <br /><%# IfEmpty(Eval("Name"), "", "
<span class='OverlayName'>" + Eval
<string>("Name") + "
</span>") %><%# IfEmpty(Eval("Position"), "", "
<span class='OverlayPosition'>" + Eval
<string>("Position") + "
</span>") %> </div>
<div class="bottom">
<div class="textWrapper"><%# IfEmpty(Eval("Heading"), "", "
<span class='PopupHeading'>" + Eval
<string>("Heading") + "
</span>") %><%# IfEmpty(Eval("DetailedText"), "", "
<span class='DetailedText'>" + Eval
<string>("DetailedText") + "
</span>") %> </div>
</div>
</div>
</div>
</div>
</div>

Related

Binding.scala - SBT Out Of Memory issues

I have a large #html function (125 lines) and after that sbt fails with OutOfMemory. I increased sbt's memory to 8g and same thing so it's not just it needed a little more memory.
Is this a known issue with Binding.scala?
sbt 1.3.2
scala 2.13.3
JDK11
scala js 1.1.1
"org.lrng.binding" %%% "html" % "1.0.3"
"com.thoughtworks.binding" %%% "binding" % "12.0.0"
#html def topNav: NodeBinding[Node] = {
<nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
<div class="container-fluid">
<button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button>
<form class="form-inline d-none d-sm-inline-block mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
<ul class="nav navbar-nav flex-nowrap ml-auto">
<li class="nav-item dropdown d-sm-none no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-right p-3 animated--grow-in" role="menu" aria-labelledby="searchDropdown">
<form class="form-inline mr-auto navbar-search w-100">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="badge badge-danger badge-counter">3+</span><i class="fas fa-bell fa-fw"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-primary icon-circle"><i class="fas fa-file-alt text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 12, 2019</span>
<p>A new monthly report is ready to download!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-success icon-circle"><i class="fas fa-donate text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 7, 2019</span>
<p>$290.29 has been deposited into your account!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-warning icon-circle"><i class="fas fa-exclamation-triangle text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 2, 2019</span>
<p>Spending Alert: We've noticed unusually high spending for your account.</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-envelope fa-fw"></i><span class="badge badge-danger badge-counter">7</span></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar4.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Hi there! I am wondering if you can help me with a problem I've been having.</span></div>
<p class="small text-gray-500 mb-0">Emily Fowler - 58m</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar2.jpeg"/>
<div class="status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>I have the photos that you ordered last month!</span></div>
<p class="small text-gray-500 mb-0">Jae Chun - 1d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar3.jpeg"/>
<div class="bg-warning status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Last month's report looks great, I am very happy with the progress so far, keep up the good work!</span></div>
<p class="small text-gray-500 mb-0">Morgan Alvarez - 2d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar5.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</span></div>
<p class="small text-gray-500 mb-0">Chicken the Dog · 2w</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<div class="shadow dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"></div>
</li>
<div class="d-none d-sm-block topbar-divider"></div>
<li class="nav-item dropdown no-arrow" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="d-none d-lg-inline mr-2 text-gray-600 small">Valerie Luna</span><img class="border rounded-circle img-profile" src="assets/img/avatars/avatar1.jpeg"/></a>
<div
class="dropdown-menu shadow dropdown-menu-right animated--grow-in" role="menu">
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile</a><a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Settings</a>
<a
class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i> Activity log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout</a>
</div>
</li>
</li>
</ul>
</div>
</nav>
}

Symfony 4: Display dynamic value in modal

I want to display the details of an object (from Controller classe) in modal but after doing the code below i got this error:
Variable "doaDetails" does not exist.
<a data-href="{{ path("details_dao", { 'id': dao.id } ) }}" data-toggle="modal" data-target="#detailsModal" class="fas fa-info-circle fa-1x" title="Détails" style="color:white;"></a>
my modal in the view :
<!-- Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header" >
<h5 class="modal-title">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="accordion" id="accordionExample">
<div class="card" style="background:transparent;">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-ok collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Détails
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Nature : {{ doaDetails.natureDAO}}<hr>
Type :{{ doaDetails.typeDAO}}<hr>
Nom du Marché : {{ doaDetails.nomMarche}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My script after clicke on button:
Détails of modal
$('#detailsModal').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
action details in Controller class:
/**
* #Route("admin/dao/{id}/details_dao", name="details_dao")
*/
public function detailsDAO(MarcheDAO $dao, MarcheDAORepository $repo ){
$daoDetails= $repo->find($dao);
return $this->render('admin/dao/liste_dao.html.twig', [
'doaDetails'=>$daoDetails
]);
}
As you can see, the link is dynamic with the ID of the recod. Now, I want to open a modal with dynamic values for the details action. How I can do this.
Help!!

protractor - how to identify element

In the below page,I have to verify whether "test_tracker" is present or not. I am sure how to do that. can any one help? I thought of gng by ng-repeat but it is giving zero.
element.all(by.repeater("item in
ct.data.pageContentTypes")).count().then(function (count) {
console.log("count value: " + count);
what else approach i can go by?
code snippet:
<div ng-class="detailsChecked ? 'col-sm-8 col-xs-8 col-md-8 col-lg-8' : 'col-sm-12 col-xs-12 col-md-12 col-lg-12'" class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
<!-- ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="1" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '1' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">CORE</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="72" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '72' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">march 13 tt</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="80" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '80' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">NTC NZ MO</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="87" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '87' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">test_tracker</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="26" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '26' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">Tracker Test 0119</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
</div>
finally, below code is working to resolve it
element.all(by.repeater('role in roles.pageitems')).count().then(function (count)
{
console.log("Total number of entries are : " + count)
element.all(by.repeater('role in roles.pageitems')).map(function(elm) {
return elm.getText();
}).then(function(texts) {
console.log("Entries are " + texts);
expect(texts).toContain("" + a + "");
});
});
Try to use Xpath for this,
var track = element(by.xpath(//span[text()='test_tracker']));
track.isPresent().then(function(){
console.log("track is visible");
})

HTML2Canvas unable convert div to image with large images

I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>
In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,
trick.
set your tag with and height is double of the output image size.

FANCYBOX next imagegallery

I would like to add functionality to the fancybox, I replaced the arrows with dots I have added a button to open and close the description: like this:
$(".fancybox").fancybox({
arrows:true,
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4 class="titles">' + this.title + '</h4>'/* + '<div class="description">' + $(this.element).find('img').attr('alt') +'</div>'*/;
this.description = $(this.element).find('img').attr('alt');
this.description ='<div class="description">' + this.description +'</div>';
$(this.description).appendTo(this.inner);
if (this.title) {
// New line
this.title += '';
}
if (this.description) {
// New line
this.description += '';
}
$(".description").hide();
},
afterShow: function() {
$('<div class="expander"></div>').appendTo(this.inner).click(function() {
$(".description").slideToggle("fast");
});
},
helpers : {
title : { type: 'inside' }
},
afterLoad : addLinks,
beforeClose : removeLinks
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
function addLinks() {
var list = $("#links");
if (!list.length) {
list = $('<ul id="links">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
}
list.appendTo( 'body' );
}
list.find('li').removeClass('active').eq( this.index ).addClass('active');
}
function removeLinks() {
$("#links").remove();
}
then I define some galleries using the "rel" attribute …
<!-- Start Project -->
<div class="fphotography"> <a href="image1.jpg" class="fancybox" rel="GALLERY1" title="GALLERY1">
<div class="img-wrp"> <img class="scaleimg" src="image1.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY1" title="GALLERY1" href="image1C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div class="photography"> <a href="image2.jpg" class="fancybox" rel="GALLERY2" title="GALLERY2">
<div class="img-wrp"> <img class="scaleimg" src="image2.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY2" title="GALLERY2" href="image2C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div class="photography"> <a href="image3.jpg" class="fancybox" rel="GALLERY3" title="GALLERY3">
<div class="img-wrp"> <img class="scaleimg" src="image3.jpg" width="220" height="140" alt="DESC" />
</div>
</a>
<p class="project-title">TITLE</p>
<div class="hidden">
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3A.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3B.jpg" ><img src="#" alt="DESC"/></a>
<a class="fancybox" rel="GALLERY3" title="GALLERY3" href="image3C.jpg" ><img src="#" alt="DESC"/></a>
</div>
</div>
<!-- End Project -->
Now I would like to add two buttons when the fancy box is open that go to the next or previous gallery.
Does anybody know how to do that? any ideas?
Thany you very much in advantage..