Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: [1] 2

Author Topic: Problem to enlarge the size of the image in method "featuredcontentslider"  (Read 3693 times)

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

I have  this property in my snews 1.6 ... View news in this way "method featuredcontentslider "  

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

http://snewscms.com/forum/index.php?topic=8858.0

My problem is that I want to grow the size of the pictures in the articles automatically in this method -

See the first images you'll see that the size of a normal image

 

But I want it to display so



Is there a file (js. or. css or ..) that controls the size of the image in that method  .I have already seen such methods.



Thank you to all members who are efforts exerted in order to resolve all the problems
« Last Edit: August 19, 2010, 11:03:07 PM by adminphp »
Logged
“Fifty years of programming language research, and we end up with C++?”

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca

Ok.... just to be sure... are you saing that you want the image container to handle any size of image... from a small one to one that would fit the full wideth of the main content container... and still have the text flow around it?

If that is the case, then you could try the following:

In your style.css file, insert:
Code: [Select]

            /* div classes to float images or inserted blocks with text-wrap in articles */
            .floatright { position: relative; float: right; padding: 3px 0 0 10px; border: none; }
            .floatleft { position: relative; float: left; padding: 3px 10px 0 0; border: none; }


Where you are inserting your image in the text-area, use the following tags to wrap the image-string:
For text-wrap down the left-side of the image (image-right) use:
        <div class="floatright">image-string-here</div>
For text-wrap down the right-side of the image (image-left) use:
        <div class="floatleft">image-string-here</div>


Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

Thanks ... To respond, but did not work the way
Is there a solution to the file jflow/contentslider.css or contentslider.js 

Why put  code in the style.css ... We just want to be upsized images in (method -featuredcontentslide ... articles :1,2,3,4,5)

If, as the property belongs only within the "method"  We do not need to edit the style.css of all page .  I can give you sites that use the property that I want . like www.hespress.com  ... Thanks ... I hope to find a solution for me; thank you again mr.Keyrocks and all members
Logged
“Fifty years of programming language research, and we end up with C++?”

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal

admin, there's a pretty simple solution.
First you should make sure that your images appear first in the html output. Second, give the image output a class name, for example "full" (it's what I always use for full width images. Then, in your CSS - yes, this is a style thing and should therefore preferably be handled by CSS - put the following rule:

Code: [Select]
img.full {display:block; width: XXpx; margin:XXpx;}
Set the width to match the width of the container you put the image in. Set the margin value to something that works in your layout but note that you should restrict yourself to margin-top and margin-bottom values. The key element is display:block; - this makes the image push content that comes after it below the image. And since we set the image to be as wide as the container, you get the layout you're asking for.

Side note: Personally I would use width:100%; height:auto; for this kind of thing, but Windows browsers (read IE) don't always treat that rule correctly. By omitting the height value, all browsers *should* by default use "height:auto;" even if it's not explicitly stated. And if you set the width to match the container's width, even IE should treat your images correctly.

Why use CSS over a js or php solution? (a) It's easier. And (b) this is the kind of thing we use styling for.
Plus (c) I'm better at CSS than I am at JS or PHP.

Oh, and it doesn't matter if you put the rule in style.css or contentslider.css - that's your choice entirely.
« Last Edit: August 17, 2010, 02:46:06 AM by Fred K (agentsmith) »
Logged

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .


as we need for the introduction of effects to images like (Enlarge the image size - Make a framework for image -Directing the image to the left or right)  All of this work impacts on the images in general.
But I'm talking about Featured Content Slider . I just want to work for all affected by the image displayed  just in that method .
So that (method)  has control files (css,js,) .How can we get into all the effects in each image for each article that is displayed in (Featured Content Slide)  .Am I just do not want to enlarge the size of the image, but I also want to be displayed in the middle with a little text underneath.
Those roads that you mentioned. Successful in the other body. And not in the method .

Can we create a file "css" Enters its effects only on the image displayed within method.

Please see in the code you will see there ;"<div class="contentdiv">" ,Why did not we use this class name "contentdiv", Is the impact on content of articles in method .
Why should we always to include   <div class=full">...</div>   whenever we want to create an article,
We have class name in index.php, Automatically without the influence is that we write, in all the articles.


Code: [Select]
!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1",  //id of main slider DIV
contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2],  //[true/false, fadedegree]
autorotate: [true, 3000],  //[true/false, pausetime]
onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

<br />

I hope that Warhead me the solution to this problem because you have that much experience  .I have already given you one of the sites model
Logged
“Fifty years of programming language research, and we end up with C++?”

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal

We put the class on the img tag because there might be other images within the same context that you do not wish to have presented at full scale. So, putting the class ("full", "big", "large", "grande", whathaveyou) presents you with the opportunity to give some images a specific size while not touching others.

Now, that was just an example. Of course you can use the div "contentdiv" as your target class in a similar way:
Code: [Select]
.contentdiv img {display:block; width:XXpx; margin:XXpx 0;}
However, that will target all images within the .contentdiv container. If we target the img that we actually want to have the specific size instead, we get a more granular and controllable result.

Just note that you have to use ".contentdiv img" in your stylesheet (= the jflow stylesheet) since using just ".contentdiv" will only affect the div, not the img.
Logged

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

Thanks" Fred K (agentsmith)" Thanks for the reply. In fact, so successful in the last.

".contentdiv img" Means that the impact only on the images located in the area div  "contentdiv"
And this method is better to, I think. Because they do not need to call each time "class name" . Actually "css" Language.
Is distinct from the html" and easy. Thanks for the solution and does not wish that we meet again.
« Last Edit: August 19, 2010, 03:58:32 AM by adminphp »
Logged
“Fifty years of programming language research, and we end up with C++?”

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

Unfortunately for the inconvenience ... Can the image to be like the title of the article''Hyperlink - a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">img article = contentdiv img </a>
means that we can pressure him to convert to the article.  

sorry the inconvenience. thanks again...
« Last Edit: August 19, 2010, 11:13:03 PM by adminphp »
Logged
“Fifty years of programming language research, and we end up with C++?”

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

up please
Logged
“Fifty years of programming language research, and we end up with C++?”

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca

Unfortunately for the inconvenience ... Can the image to be like the title of the article''Hyperlink - a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">img article = contentdiv img </a>
means that we can pressure him to convert to the article.  

sorry the inconvenience. thanks again...

Unfortunately I may not understand clearly what you are asking. So I guess I will have to guess.
Are you asking if an image can also be a hyperlink to an article.... so when you click the image you get the article that contains the image?

Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal

Quote from: adminphp
Can the image to be like the title of the article

adminphp - that question really belongs in the original mod thread (http://snewscms.com/forum/index.php?topic=8858.0) since those changes would have to be made within the mod code. I haven't used that mod myself so I can't help you there. Sorry.
Logged

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

First, Thanks for the reply ... What I want to say is, can the image to be like the title of the article



To explain only. Noss can be a "hyperlink" to the image of each article ..Just a reminder for.i have this "method"--- http://snewscms.com/forum/index.php?topic=8858.0/

can we have like this for each article in the CMS.

<a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/">image of each article </a>

I can explain to you more thank very much to participate .. And I'm sorry for the inconvenience
Logged
“Fifty years of programming language research, and we end up with C++?”

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal

Again, your question belongs to the original mod topic rather than putting it here. That said, you could take a look at my Article Image mod and see if it's of any use to you... (note though that my mod is for sNews 1.7 and not 1.6)
http://snewscms.com/forum/index.php?topic=9217.0
« Last Edit: August 22, 2010, 12:46:05 AM by Fred K (agentsmith) »
Logged

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

Thank you very much ... I did not see the correct link :http://snewscms.com/forum/index.php?topic=8858.0    But in this last link is correct.  http://snewscms.com/forum/index.php?topic=9217.0    thanks mr fred k
Logged
“Fifty years of programming language research, and we end up with C++?”

adminphp

  • Full Member
  • ***
  • Karma: 4
  • Posts: 150
  • you must be a great snewser .

Why we will add  field in the Article panel for entering an image url  .I think that the way in which I have mentioned in your article something difficult. Because you need to modify the file snews.php ...The other hand I just want to be a photo as the title of the article can be pressed  ....I have mentioned in your article I think that there are many other touched Can you tell us one of the easy way. ....Can we include this code in a file contentdiv.css or style.css

.contentdiv img {display:block; a href="'.db('website').$v['catSEF'].'/'.$v['artSEF'].'/"; width:430px; hight:320px; margin:XXpx 0;}

What I want to say is that we'll CONNECT hyperlink to the image located in the method (featured content slider)


 only to remind  i have snews1.6
Logged
“Fifty years of programming language research, and we end up with C++?”
Pages: [1] 2