Jump to content
crusin

image popup on home page

Recommended Posts

hey guys we are using processwire version 3.0.42, we have an important notice that we want to show on the home page of our website. its an image and it should load once the website is loaded and there should be an option to close the popup appearing. is there any plugin that can help us get this done or some code any kind of help would be useful. its a litle urgent.

thanks in advance.

Share this post


Link to post
Share on other sites

As far as a modal plugin, I would check out izimodal or jquery modal (there are hundreds out there and tbh I am forgetting one I believe a member here created that I love 😞 ). 

You could create a page named notifications with your image field and then pull that information directly into your homepage (in whatever markup you need for the modal).

 

** Noel Boss made featherlight.js

Share this post


Link to post
Share on other sites

hey louis,

thanks for the update, isnt there a ready to use plugin or extension which when installed directly gives an option to display the pop-up on homepage.

Share this post


Link to post
Share on other sites

I do see that processwire does have vex . There is a a section on "including vex in your project" that might be helpful to you. However, to my knowledge there are no true "built-in" frontend modules for modals. The great thing (in a lot of people's eyes) is that processwire allows you to use whatever you want in the frontend (be it frameworks, jquery, etc etc). Are you currently using any css framework on you project like uikit/bootstrap/foundation? A lot of these have built in modals that you you include in your template. 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By franciccio-ITALIANO
      Hi, in wordpress homepage we can put a list of LAST ARTICLES AND COMMENTS.
      Can I do same thing with processwire?
      If yes, how?
      There is a tutorial?

      Thanks!
    • By louisstephens
      I hope this is the correct place to post this. I currently am building a "dashboard" that displays some stats etc, but also handles login/logout with a form. Currently, when a user uses the form on the homepage, they redirected (if the credentials are correct) to the backend of processwire.
      However, I was hoping to direct the user back to the dashboard and display an alert (for now until I get a library to handle this). I got it somewhat working if I dont redirect the user. However, if I refresh the page, the alert still "pops up". Does anyone know of a way to redirect to the home page, but then display an alert?
      My Code to login:
      <?php if($input->post->user && $input->post->pass) { $user = $sanitizer->username($input->post->user); $pass = $input->post->pass; if($session->login($user, $pass)) { // login successful $session->redirect($dash); } } ?>  
    • By Claudio
      Hey guys,
      this year I started my own company doing webdesign in Karlsruhe Germany and I wanted you guys to have a look at my site and references and give me some feedback about my webdesign:
      Claudio Emnet Webdesign Karlsruhe
      Also I would love to hear how I could benefit from processwire. 

      Edit: It's a year later and i totally forgot about this post! Thanks for your feedback, I made most of the changes. Still trying to improve with every project!
    • By dev_panther
      I've started a processwire project from a blank project. 
      for some reason when I open my browser the page opened is not the "home.php" page, but the "basic-page.php" template. I've checked and my home page is set to use the 'home' template and not the 'basic-page' template. How do I change that?
    • By GuruMeditation
      Hi all, I've just spent most of the night trying to debug this to no avail.
      My site has been working as expected for a while now, but over the last two days I've noticed a few weird issues. The only thing I've changed is to update my foundation 5 files from 5.1.1 to 5.2.2, so I reckon it might be something to do with that? However, I was hoping you'd have a look at the following code to make sure I've not done something stupid.
      The following code has been cut back to the basics for troubleshooting, and should just load the duckduckgo logo in a fancybox popup window, but it loads it as a flat page instead.
      <!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/normalize.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/foundation.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/custom.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>fb/jquery.fancybox.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="<?=$config->urls->templates;?>fb/jquery.fancybox.pack.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/modernizr.js"></script> <title><?=$pages->get("/")->site_name;?> | <?=$page->title;?></title> </head> <body> <div class="container"> <a class='th single_1' href='https://duckduckgo.com/assets/_logo_next.png' title='duck'><img src='https://duckduckgo.com/assets/_logo_next.png' alt='duck' /></a> </div> <script src="<?=$config->urls->templates;?>js/vendor/fastclick.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/jquery.js"></script> <script src="<?=$config->urls->templates;?>js/foundation.min.js"></script> <script type="text/javascript"> $(document).foundation({ orbit: { animation: 'fade', timer_speed: 8000, pause_on_hover: true, animation_speed: 500, swipe: true, resume_on_mouseout: true, slide_number: false, navigation_arrows: false, bullets: false } }); </script> <script type="text/javascript"> $('a[href*="/assets/files/"]:has(img)').addClass('th single_1'); </script> <script type="text/javascript"> $(document).ready(function() { $(".single_1").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', helpers : { title : { type : 'inside' }, overlay : { locked : false } } }); }) </script> </body> </html>
×
×
  • Create New...