hey guys i want to create one display form in which at the bottom images with some text are display in a sliding format.
And when user take mouse pointer onto image that time at the top that image look bigger compare to bottom image.& with image some text also appear with "readmore" button.
when you click "readmore" then it redirect to other page which have full info about selected content.
for clear view what i said visit www.yahoo.com
i want to create some like that for displaying news with pics.
Pratickg88: This is what I used in a similar project:
jCarousel combined with jQuery 1.4.2.
Then I did something rolling my own Carousel class in another project:
http://www.phpexperts.pro/demos/graph_sort/
JavaScript source code for that widget.
Related
I am in the process of creating a site where visitors can preview(not THUMBNAILS!) another url on mypage in an input text box and click on"preview" button-
I am using CURL from php to extract the contents of the site
and have divided my page into two halves one for accepting url and the other half which will display the previewed content, basically i do not want image of the url site like GOOGLE.
though the CURL fetches me the contents and I am able to see the content on the preview half what is annoying is the CSS of the previewed html is getting applied across even my page :(
since my knowledge of css is very limited can anyone help me with the following
css of the previewed section must not get applied to my part of the page
How to scale down the previewed site just to fit into the preview section of my page.
thanks,
Jay
Use an iframe to keep the preview site separate from your own. Something like this should work:
<iframe id="preview" src="about:blank"></iframe>
<script>
function previewUrl(location) {
document.getElementById('preview').src = location;
}
</script>
I am trying to build a page where i am having an image. Now I want to do a task that when ever mouse is taken over a certain part of image , that image with some links popup as a Mouse Hover Functionality.
Like For E.g. I have a map of US(as an Image on my Webpage) , and in that when I take the mouse over its State ( say: Texas) then the image of Texas ( which is embedded as Hyper link ) pops up in larger view and that image have additional links of Cities and user should be able to click those links and can reach the page of that City.
I Hope my Query is Clear.
You can use image maps to break into areas(for eg states). You can some jquery library like maphighlight, to show the hovering effect. And finally since you want to show dynamic content in the pop up boxes, you can create a generic template which gets populated based off the id being passed and then you can make ajax request to that page and pass the id along. Also colorbox(is a type of lightbox) supports image maps, so you can populate it using ajax, just by passing the urul in href tags of each area.
I need a way to automatically generate a thumbnail of the target page when the user hover over a URL (hyperlink) on my page.
I've found several examples of people using pre-created .gifs (or other images) to show a thumbnail of the target site while hovering over the link (see example #1), but I need a way to do this dynamically. Is there a way to generate a thumbnail of a page, either on runtime, or an easy way to update the current thumbnail after editing a page?
Simply put; I need to show a thumbnail of the target page when hovering a hyperlink on my page. This thumbnail should not be based on an image that I have to generate myself after each edit, but rather a snapshot of the current page. Much like google does when searching for websites.
Thanks a lot in advance!
Example #1:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
Hover your mouse over "Zoka Coffee"..
Try to study about this library html2canvas
I managed to create a simple blog and an admin page using PHP. I didn't use a CMS like wordpress because I wanted a deeper understanding of PHP.
I wanted to create an admin page that allowed the user to specify where in their blog posting they could put in a picture; for example, they can add a photo before the first paragraph or after.
My admin page as it is now is just a textarea input field and a submit button that submits text-only blog posts from the textarea field to the database. My thought process was that I could add img tags into the textarea input field, but the user's photos might be stored on their hard drive so I thought of the idea to store PHP code in the textarea input field to retrieve image files from the database. For example, if I wanted to place a photo after the first paragraph of the blog post, I would type something like this into the textarea field:
This is the first paragraph. Here is a photo of my vacation:
<? echo "<img src='getPhoto.php?page=blogPost'>"; ?>
Then I click the "submit button" and the paragraph with the PHP code gets submitted into my database. The page with the blog posting retrieves the text, "This is the first paragraph. Here is a photo of my vacation:" and the PHP code. The PHP code then retrieves and shows the photo.
The problem is that submitting PHP code with the blog text might be confusing for a user who is not tech-savvy or does not have any programming knowledge. The admin page should make it possible for the blog writer to place photos anywhere in their blog post without programming knowledge. I haven't found a tutorial yet that covers image placement in a PHP blog's admin page. Any help getting started would be appreciated.
One way to accomplish what you want is by implementing custom shortcodes. In you case it'd look something like this:
This is the first paragraph. Here is a photo of my vacation:
[image bahamas-00123]
How it works is that you do something like this:
$text = shortcodes($text);
You'd need a separate area for uploading photos and some way of keeping track of them (ie: sql, flatfiles) so you know that bahamas-00123 actually refers to /some/path/DSC-00123.JPG.
For some code please check the accepted answer of: How do I replace custom “tags” in a string?
You can use a text editor like ckeditor or tinymce to format the text and upload images. This way users need not be aware about the custom tags and they can place the image wherever they like.
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.