You want to expanded a thumbnail so that it is bigger? It would just get all distorted and fuzzy.
Thread Starter
ijared
(@ijared)
No, now that big, but on a pop up like width:800px height:500px.
So you want a lightbox? You want to click on a thumbnail and then show a full picture?
Thread Starter
ijared
(@ijared)
Something like lightbox. The image will not fill the whole screen. W=800px, H=500px.
You can not really do this without a plugin.
Thread Starter
ijared
(@ijared)
Thread Starter
ijared
(@ijared)
OK. If I can only do this b using plugins, I will try something else.
In WordPress, pretty much everything you do above and beyond the normal features will require plugins. Plugins are not bad, they are how you extend the capabilities of WordPress. Most of WordPress’s own internal functionality is implemented in the same way plugins would do it.
WordPress is, inherently, a plugin loader and a large collection of predefined plugins.
Doing something “without a plugin” is basically the same as doing something “the wrong way”.
Adding a lightbox to the theme’s functions has the same impact as adding a lightbox plugin. I don’t understand why you would want to code it instead of use a plugin. If you use a plugin it will be easier and nicer.
Thread Starter
ijared
(@ijared)
So no one knows how to click on a thumbnail and the image increases to a pop up like width:800px height:500px. I am using lightbox 2 but the results doesn’t look good. Everything was working fine when I tried it at w3schools. But when I edited and put in wordpress, the original image and the expanded image both shows on the page. I don’t know what I am doing wrong. Why all 4 images are shown on the page. Any help?
These are the things I have added to the site:
[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
</link>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
=====================
<div data-role="popup" id="myPopup">
<p>Menu 1!</p>
<a href="#">Close</a><img src=Menu1.jpg style="width:800px;height:500px;" alt="menu 1">
</div>
</div>
<div data-role="popup" id="myPopup2">
<p>Menu 2!</p>
<a href="#">Close</a>
<img src=Menu2.jpg style="width:800px;height:500px;" alt="menu 2">
</div>
