I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
Related
In my project's homepage there must be some images, these must link to other pages. Now, I want to manage these links in an automatic way using PHP. The only idea I came up with is to make a form and insert the images into some buttons and make their background invisible.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>FRESH ALBUMS</h3>
</div>
</div>
<div id="myline"></div>
<div class="row">
<div class="col-md-3">
<img src="contentimg/abbeyroad.jpg" height="200px" width="200px">
<div class="caption">
<h4>Beatles</h4>
</div>
<p> test</p>
</div>
<div class="col-md-3">TEST2</div>
<div class="col-md-3">TEST3</div>
<div class="col-md-3">TEST4</div>
</div>
</div>
This is the HTML at the moment. I just want to know if there are better ideas, options and if it will stay responsive. Thanks in advance.
I do not understand exactly what you are asking, but I cannot leave comments so I will try to answer what I think you are asking.
For the HTML part, you don't need a form with buttons, you can make hyperlinks out of the images instead, and the PHP can get the images to match the hyperlinks when it sends the page to your users browser. The PHP code would look like:
echo "
<a href='".$newPageLink."'>
<img src='".$imageLocation."' width='100px' height='100px'>
</a>";
Where $newPageLink is a variable in your PHP script that holds the path information for your hyperlink, and $imageLocation is the path information for where the image is stored.
All you need is a foreach or while loop to go through all of the images that you want on the page and also all of the pages that each image should link to. If it is always a manageable and unchanging list, you could store the values in an array in your script. For larger lists, or lists that are dynamic/always changing you might need to use a MySQL database table to store the image and hyperlink information.
Is there a quick way, via script maybe, to remove a certain pair of div's out of all my wordpress posts? For example:
I want to go from this:
<div class="single_textimage">
<div class="youtube_play"><iframe src="-,-"></iframe></div>
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<div class="youtube_play"><iframe src="-,-"></iframe></div>
AND
From this:
<div class="single_textimage">
<img class="aligncenter size-full wp-image-1700" src="-,-" />
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<img class="aligncenter size-full wp-image-1700" src="-,-" />
So I want the divs: single_textimage, single_textimage_text and single_textimage_copyright to go.
I hope there is an easy script, or difficult for that matter. Via "php", "mysql" or "jquery" for example, that I can put in test.php in the root or something...
I hope I supplied you with enough information. If I haven't made myself clear enough, please reply. :)
Seems to me like you should be able to take those out of whatever template your using - probably in a PHP include, but I don't really use WordPress, so I wouldn't know where without seeing all your files. If you're bent on using jQuery instead of modifying the template, I would throw in some CSS too, to hide the elements that will be removed:
.single_textimage, .single_textimage_text, .single_textimage_copyright{
display:none;
}
Then you can take the elements you want to keep out of their parent DIVs, and place them right after (or before):
$('.youtube_play, .wp-image-1700').each(function(){
$(this).parent().after($(this));
});
Then you can remove the elements you don't want from the page:
$('.single_textimage, .single_textimage_text, .single_textimage_copyright').remove();
Here's a fiddle: https://jsfiddle.net/3uztorzL/
I would use this search and replace utility to update all of the content in the DB:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
You'll need a regex to replace <div class="single_textimage_text">Some text.</div> (assuming the "some text" is different in each post). The utility supports regex replace. This may do it:
<div class="single_textimage_text">(.*?)</div>
Make sure you make a backup before you do the replace.
I've been looking at this for a few hours now and I've probably overlooked something silly, but I really can't get this to work.
I have created a .php file with four different php-files which are included with the
I am practicing with building websites and my first website used to solve this problem with frames, I could simply target every anchor tag to the mainframe and it worked perfectly. However, as frames are a deprecated feature, I decided to replace them. I can't seem to get the links working however.
There are tons of answers around, and that's probably the biggest problem, I can't figure out which solution fits to my specific design. Sorry if this is a doublepost.
This is what I've created so far:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
<?php include 'Pages/main.php'; ?>
As said, there are buttons with hyperlinks in the navigation page and 'normal' hyperlinks in the upperdivs. Is there a way to open all those hyperlinks in the main content div, without having to copy all I've already got? I've read a lot of information about Ajax and the PHP-load feature, but I'm not sure what I should use. I've tried adding it as well, but couldn't get it to work. Thanks in advance!
Edit: I've also tried using an Iframe with an Iframe ID, and pointing to it using the target-tag. The problem is that the pages differ very much in content - if I set the height of the Iframe to, let's say, 1000px, it's way to large and you can scroll too far down on pages with minimal content, and if I set it to 100px, I get two scrollbars, one on the Iframe and one on the right side of the webpage, which is very ugly - and above all - very annoying.
Without being clear on exactly what you're asking, I assume you're looking for an easier way to handle includes.
This is not the best way to do it, but I would have each page be in the URL you want, and have the 'Parts' pages be in a separate folder.
/
| main.php
| about.php
| news.php
/ Parts
| navigation.php
| upperdivs.php
| EVERY_PAGE.php
Then as a shortcut, you could make EVERY_PAGE.php like this:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
On each page you would do this:
<?php include 'Parts/EVERY_PAGE.php'; ?>
///
// ... Page code here ...
//
Also, it's good to learn some better styles of coding, but this will get the job done in a clean and quick way.
I have many documents on my server that are available for my visitors to download. I have a display set up like so:
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320X200" alt="ALT NAME">
<div class="caption">
<h3>Header Name</h3>
<p>Description</p>
<p align="center">Download</p>
</div>
</div>
</li>
</ul>
Now within this I currently have a image as the main display for each document. I am wanting to display a preview of the document in that space. Maybe a screenshot completed by the browser on page load of just the first page of the document.
I have tried <iframe src="assets/documents/NHSHandbook1314.doc" width="230" height="144"></iframe> instead of the image but that resulted in nothing being displayed in the iframe and the document downloading as soon as the page loads.
I would like to do this using javascript or php on page load. I basically want the browser to take a "screenshot" of the external document and then display it for the visitor to preview. I don't want them to be able to interact "read" the document from the preview, just see what they are downloading. (at least the first page)
I hope that makes sense on what I am wanting to do!
Browsers cannot render Microsoft Word documents. You will need to generate some sort of thumbnail on the server and display that.
Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>