Image Gallery , Countdown

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Sun, 05/15/2016 - 17:11
#1
Image Gallery , Countdown

Hi MD team,

i have few questions
1. How to add auto play, Prev and Next buttons in image gallery popup window ?
2. How to change values of Countdown in coming soon page ?
3. How to change maps location to my location in contact page ?

Regards
aman

hattt13
Offline
Last seen: 1 week 3 days ago
Sat, 05/21/2016 - 17:51

Hi Âmnbhalla26: 

1. you file the code in file script.js:

/* Popup Gallery */
GalleryPopup();
function GalleryPopup() {


if($('.gallery_item').length) {


$('.gallery_item').each(function(index, el) {
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
mainClass: 'mfp-with-zoom',
zoom: {
enabled: true,
duration: 300,
easing: 'ease-in-out',
},
gallery: {
enabled:true,
arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',
tPrev: '',
tNext: ''
}
});
});
}
}

to fix:

/* Popup Gallery */
GalleryPopup();
function GalleryPopup() {


if($('.gallery_item').length) {


$('.gallery_item').each(function(index, el) {
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
mainClass: 'mfp-with-zoom',
zoom: {
enabled: true,
duration: 300,
easing: 'ease-in-out',
},
gallery: {
enabled:true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
}
});
});
}
}

2. You change values of Countdown in coming soon page in the code: 

var nextYear = new Date(new Date().getFullYear() + 1, 1 - 1, 26);

in file script.js 

/* Coming Soon */
CountDown();
function CountDown() {
if($('#countdown').length) {


var nextYear = new Date(new Date().getFullYear() + 1, 1 - 1, 26);
$('#countdown').countdown(nextYear, function(event) {
var $this = $(this).html(event.strftime(''
+ '<div class="item"><span class="count">%D</span><span>Days</span></div>'
+ '<div class="item"><span class="count">%H</span><span>Hours</span></div>'
+ '<div class="item"><span class="count">%M</span><span>Minutes</span></div>'
+ '<div class="item"><span class="count">%S</span><span>Seconds</span></div>'));
});
}
}

3. you change maps location to my location in contact page: 

you search address in google map

Image title


address bar are two parameters: 

Image title


you can change two parameters: 

39.0926986,-94.5747324

in 

data-locations
<div class="contact-map">
<div data-locations="39.0926986,-94.5747324--39.0912284,-94.5743515" data-center="39.0926986,-94.5747324"></div>
</div>

width data-center included to display location map on the screen

Thanks.

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Thu, 05/26/2016 - 00:20

thanks for your reply.

but i am not good in jquery can you help me to change countdown to date 1st June 2016

and contact form is not working too, you can check www.himalayannomadcottages.com/test.

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Thu, 05/26/2016 - 00:35

Hi

i am facing a error in home page's gallery section i am using 6 pictures but it in popup it is displaying 7photos and when i am clicking on BROWSE OUR GALLERY Button it again opens blank popup window .

6 photos but displaying 7photos in bottom

Image title

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Fri, 05/27/2016 - 16:04

We will check and respond you as soon as possible!

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Mon, 05/30/2016 - 20:02

can i have the psd files for the project and please reply soon.....

Thanks

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Tue, 05/31/2016 - 09:26

Hi Amanbhalla26,

Please remove 

<div class="item-size"></div>
vananh
Offline
Last seen: 2 months 3 weeks ago
Thu, 06/02/2016 - 16:02

Hi, pls revert change "<div class="item-size"></div>", and in script.js change 

$('.gallery-content').each(function(index, el)

to that

$('.gallery-isotope').each(function(index, el)
amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Sat, 06/04/2016 - 18:00

Thanks Vananh,

it works, i have other queries mentioned before not solved.

1. I need the psd files of project.

2. Countdown date change to 15th June 2016

3. Booking & Contact form are not sending mail.

please help.


Thanks,

amanbhalla26


amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Sun, 06/05/2016 - 21:41

hi md team,

if i am adding <form action="search_step_2.php" method="post"> to <div class="room-detail_form"> then page is not opening without this code page is opening but i need booking for in working condition. you can check http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html

please help me soon i have deadline and please reply for last comment also..

thanks  

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Mon, 06/06/2016 - 10:02

Hi,

Please check your email for PSD file

Other issues, we are working on them 

We will respond you asap!

Many thanks

hattt13
Offline
Last seen: 1 week 3 days ago
Mon, 06/06/2016 - 16:44

Hi Amanbhalla26, 

You can edit CountDown in file script.js

About the booking form, this is just a html template with static data. Thus, booking form can not send email as a dynamic html (like a theme)

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Mon, 06/06/2016 - 19:25

hi MD team,

thanks for psd files.

when you are selling this html template you are showing 

Features

  • 42 HTML files with 2 homepages

  • 6 room styles + 3 gallery styles

  • Functional booking form

  • Functional contact form

  • Other page for hotel needed: activity, event, restaurant, guestbook

  • Shortcode, comingsoon & 404 page included

  • LESS files included

Now you are saying that booking form can not send email as a dynamic html (like a theme)....

I know that this is static but i need these functionalities only as you mentioned with php files and ajax.

So help me for this 

Thanks

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Tue, 06/07/2016 - 10:25

Hi,

You can check this thread http://html.megadrupal.com/forum/site-templates/hillter/616 (comment #4) for better understanding of functional booking form in a HTML template

As for the error here http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html (page does not load), it is because file jquery.validate.min.js and jquery.form.min are missing, we send you via email, please check!

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Tue, 06/07/2016 - 17:41

Hi Cindy,

it works now, these files were missing . Thanks

I followed the thread http://html.megadrupal.com/forum/site-templates/hillter/616 (comment #4)

but email is not sending in all forms booking form Error-(Send Mail Fail) , contact form error-(Send email fail)

http://www.himalayannomadcottages.com/test/contact.html

http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html

http://www.himalayannomadcottages.com/test/index.html



hattt13
Offline
Last seen: 1 week 3 days ago
Wed, 06/08/2016 - 11:20

Hi Amanbhalla26  

- INSTRUCTION:

In file search_step_3.php, please search the following code and replace with your own email:

$from='info@megadrupal.com';

similarly, in file send_mail_contact.php, Please replace your own email in:

$from='info@megadrupal.com';

Also, please check email function (send to customer's email?). The right code is:

$to = 'your email'; 
$from = $_POST['email'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$msg = $_POST['message'];




$headers = 'From: '.$from . "\r\n" .
'Reply-To: '.$from . "\r\n" .
'X-Mailer: PHP/' . phpversion();


if(mail($to, $subject, $msg, $headers)){
echo '<p class="reservation-confirm">Thanks for your contact. We will reply soon.</p>';
}else{
echo '<h2>Send email fail</h2>';
}

When the email sent successfully, there will be a notification on site. Currently, we see the notification already. However, text color is white so you can not see the notification (because background color is white, too). You can change css (color attribute of Class Reservation-Confirm => Another Color) To See The Notification

We check and see the form here http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html is similar to the form in page /index

Or

- READY SOLLUTION:

Please check your email. We send you 2 updated files: send_email_contact.php and search_step_3.php (We configure file search_step_3.php so that email will be sent to both admin and customer)

After update, please replace info@megadrupal.com with your own email in those 2 files

And add the following code in file style.css:

.contact-form .reservation-confirm {
color: green;
}


cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Wed, 06/08/2016 - 11:15

Also,

We check this page http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html and see 2 similar script tag

Please remove the first one

Image title

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Thu, 06/09/2016 - 03:24

Thanks MD team,

Contact form is working and i am able to get emails in my email

but booking form is not working (email send message is coming but email is not received in email ) in both pageshttp://www.himalayannomadcottages.com/test/index.html

http://www.himalayannomadcottages.com/test/accommodation-detail-deluxe.html

thanks.

 

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Thu, 06/09/2016 - 10:38

Hi,

In file search_step_3.php, when you replace your own email in:

$to = 'info@megadrupal.com, '.$from;

Did you remove '.$from; ?

Please do not remove it

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Thu, 06/09/2016 - 13:04

hi Cindy,

it works fine.

I appreciate your help. thanks

I am receiving email in format for BOOKING REQUEST is 

R P Bhalla<br> arrive:06/12/2016<br>departure:06/14/2016<br>adults:2<br>children:0

Can i change it to other format like mentioned below.

Name : R P Bhalla 

Arrive Date : 06/12/2016  

Departure date :06/14/2016  

Adults : 2  

Children : 0

Name : Amit Bhalla

Phone : 9218073211

Email : amanbhalla@outlook.com

*Can i send mail to multiple email addresses.

Thanks and Regards,

Aman Bhalla


cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Thu, 06/09/2016 - 15:09

Hi,

1. Please open file search_step_3.php and search $msg and $headers

Please replace with:

$msg = "<html><body>$name<br> arrive:$_POST[arrive]<br>departure:$_POST[departure]<br>adults:$_POST[adults]<br>children:$_POST[children]</body></html>";


$headers = 'From: '.$from . "\r\n" .
'Reply-To: '.$from . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

As you see, we add tag <html><body>....</html></body> for $msg

and 

$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

2. You can add more email so that the mail will be sent to multiple email addresses. Just separate by comma ","

 For ex,

$to = 'info@megadrupal.com, cindy@megadrupal.com, customersupport@megadrupal.com '.$from;

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Fri, 06/10/2016 - 03:22

Hi Cindy,

in send_mail_contact.php  Mail Is Going To Both Email Addresses (Amanbhalla26@Gmail.Com , Amanbhalla@Outlook.Com)

But in search_step_3.php mail is going to only one email (amanbhalla26@gmail.com)

send_mail_contact.php
<?php
$To = 'Amanbhalla26@Gmail.Com , Amanbhalla@Outlook.Com';

$from = $_POST['email'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$msg = $_POST['message'];

$headers = 'From: '.$from . "\r\n" .
    'Reply-To: '.$from . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

if(mail($to, $subject, $msg, $headers)){
    echo '<p class="reservation-confirm">Thanks for your contact. We will reply soon.</p>';
}else{
    echo '<h2>Send email fail</h2>';
}
?>

Search_step_3.Php

<?php
$from = $_POST['email'];
$To = 'Amanbhalla26@Gmail.Com , Amanbhalla@Outlook.Com'.$From;

$name = $_POST['name'].'';
$subject = 'MAIL from www.himalayannomadcottages.com BOOKING REQUEST FORM ';
$msg = "<html><body><b>$name</b><br> <b>Arrival Date:$_POST[arrive]</b><br><b>Departure Date:$_POST[departure]</b><br><b>Adults:$_POST[adults]</b><br><b>Children:$_POST[children]</b></body></html>";

$headers = 'From: '.$from . "\r\n" .
    'Reply-To: '.$from . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

if(mail($to, $subject, $msg, $headers)){
    echo '<p class="reservation-confirm">Thanks for your request for a reservation. We\'re checking availability
 and we\'ll get back to you as soon as possible.</p>';
}else{
    echo '<p>Send mail fail</p>';
}
?>

How to use ajax Guest Book ( WRITE IN GUEST BOOK ) form

Thanks, 

Aman

cindy
cindy's picture
Offline
Last seen: 7 hours 23 min ago
Fri, 06/10/2016 - 16:01

Hi,

1/ 

In file search_step_3.php, you need to add a comma after Amanbhalla@outlook.com like this:

$To = 'Amanbhalla26@Gmail.Com , Amanbhalla@Outlook.Com,'.$From;

2/

-  Please check file guest-book.html and guest-book-2.html if they contain the following code: 

<!-- validate -->
<script type="text/javascript" src="js/lib/jquery.form.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.validate.min.js"></script>

If the 2 files do not include that code, please add that code before:

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

- Please add the following code at the bottome of file scripts.js in folder js:

function sendGuestBook(){
var $ = jQuery;
$('#ajax-form-write-guest-book').validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
location: {
required: true,
minlength: 5
},
title: {
required: true,
minlength: 9
},
testimonial:{
required: true,
minlength: 20
}
},
messages: {
name: {
required: "Please enter your name.",
minlength: $.format("At least {0} characters required.")
},
email: {
required: "Please enter your email.",
email: "Please enter a valid email."
},
location: {
required: "Please enter your location.",
minlength: $.format("At least {0} characters required.")
},
title: {
required: "Please enter your testimonial title.",
minlength: $.format("At least {0} characters required.")
},
testimonial: {
required: "Please enter your testimonial.",
minlength: $.format("At least {0} characters required.")
}
},


submitHandler: function(form) {
$(form).ajaxSubmit({
success: function(responseText, statusText, xhr, $form) {
$(form).parent().append(responseText).find('.top-message').remove();
$(form).remove();
}
});
return false;
}
});

$('#ajax-form-write-guest-book').submit();
return false;
}

- Please put file wite_guest_book.php into root web and update file ajax-guest-book-form.html (check your email for the 2 files)

Then open file wite_guest_book.php and change email address as well as notification of sucessful email sending

amanbhalla26
Offline
Last seen: 1 year 2 weeks ago
Sat, 06/11/2016 - 01:17

Hi Cindy, 

I really appreciate your help in resolving the problem.

Thanks & regards,

Aman Bhalla

Log in or register to post comments